From da4c0360a9e3cd4bb46ccc7361ad533efc7c9105 Mon Sep 17 00:00:00 2001
From: Krystle Salazar <krystle.salazar@automattic.com>
Date: Wed, 26 Jun 2024 13:18:02 -0400
Subject: [PATCH] Fix possible `TypeError` when accessing `route.value`
 properties (#4523)

---
 .../src/components/VHeader/VHeaderMobile/VHeaderMobile.vue  | 2 +-
 frontend/src/components/VMediaInfo/VMetadata.vue            | 2 +-
 frontend/src/components/VMediaInfo/VRelatedMedia.vue        | 6 +++---
 frontend/src/composables/use-match-routes.ts                | 2 +-
 frontend/src/pages/audio/_id/index.vue                      | 4 ++--
 frontend/src/pages/image/_id/index.vue                      | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
index 59fb177e0fc..788a93e22bf 100644
--- a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
+++ b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -362,7 +362,7 @@ export default defineComponent({
     })
 
     const route = useRoute()
-    const routeSearchTerm = computed(() => route.value.query.q)
+    const routeSearchTerm = computed(() => route.value?.query?.q)
     watch(routeSearchTerm, (newSearchTerm) => {
       const term = Array.isArray(newSearchTerm)
         ? newSearchTerm[0]
diff --git a/frontend/src/components/VMediaInfo/VMetadata.vue b/frontend/src/components/VMediaInfo/VMetadata.vue
index 5c509e15f62..55b96151324 100644
--- a/frontend/src/components/VMediaInfo/VMetadata.vue
+++ b/frontend/src/components/VMediaInfo/VMetadata.vue
@@ -87,7 +87,7 @@ export default defineComponent({
         return
       }
       sendCustomEvent("VISIT_SOURCE_LINK", {
-        id: route.value.params.id,
+        id: route.value?.params?.id,
         source,
       })
     }
diff --git a/frontend/src/components/VMediaInfo/VRelatedMedia.vue b/frontend/src/components/VMediaInfo/VRelatedMedia.vue
index 77cbca6d7c6..e6adf6b37c7 100644
--- a/frontend/src/components/VMediaInfo/VRelatedMedia.vue
+++ b/frontend/src/components/VMediaInfo/VRelatedMedia.vue
@@ -76,9 +76,9 @@ export default defineComponent({
     )
 
     const searchTerm = computed(() => {
-      const q = Array.isArray(route.value.query.q)
-        ? route.value.query.q[0]
-        : route.value.query.q
+      const q = Array.isArray(route.value?.query?.q)
+        ? route.value?.query?.q[0]
+        : route.value?.query?.q
       return q ?? ""
     })
 
diff --git a/frontend/src/composables/use-match-routes.ts b/frontend/src/composables/use-match-routes.ts
index 3a40af858e7..070fe71a6cd 100644
--- a/frontend/src/composables/use-match-routes.ts
+++ b/frontend/src/composables/use-match-routes.ts
@@ -29,7 +29,7 @@ export const useMatchRoute = (
     return routes.includes(route.split("__")[0])
   }
 
-  const matches = ref(routeNameMatches(route.value.name))
+  const matches = ref(routeNameMatches(route.value?.name))
 
   router.beforeEach((to, _from, next) => {
     matches.value = routeNameMatches(to.name)
diff --git a/frontend/src/pages/audio/_id/index.vue b/frontend/src/pages/audio/_id/index.vue
index 7722adb40be..11fdd431ee5 100644
--- a/frontend/src/pages/audio/_id/index.vue
+++ b/frontend/src/pages/audio/_id/index.vue
@@ -94,7 +94,7 @@ export default defineComponent({
 
     const audio = ref<AudioDetail | null>(
       singleResultStore.audio?.id &&
-        singleResultStore.audio.id === route.value.params.id
+        singleResultStore.audio.id === route.value?.params?.id
         ? singleResultStore.audio
         : null
     )
@@ -105,7 +105,7 @@ export default defineComponent({
     const { error: nuxtError } = useContext()
 
     useFetch(async () => {
-      const audioId = route.value.params.id
+      const audioId = route.value?.params?.id
       await singleResultStore.fetch(AUDIO, audioId)
 
       const fetchedAudio = singleResultStore.audio
diff --git a/frontend/src/pages/image/_id/index.vue b/frontend/src/pages/image/_id/index.vue
index 275e3d99762..d88bf9f1af5 100644
--- a/frontend/src/pages/image/_id/index.vue
+++ b/frontend/src/pages/image/_id/index.vue
@@ -133,7 +133,7 @@ export default defineComponent({
 
     const image = ref<ImageDetail | null>(
       singleResultStore.image?.id &&
-        singleResultStore.image.id === route.value.params.id
+        singleResultStore.image.id === route.value?.params?.id
         ? singleResultStore.image
         : null
     )
@@ -158,7 +158,7 @@ export default defineComponent({
     const { error: nuxtError } = useContext()
 
     useFetch(async () => {
-      const imageId = route.value.params.id
+      const imageId = route.value?.params?.id
       const fetchedImage = await singleResultStore.fetch(IMAGE, imageId)
       if (!fetchedImage) {
         if (fetchingError.value && !isRetriable(fetchingError.value)) {