Vue3从Strapi加载图片正常，刷新/跳转后崩溃求排查

问题根源 #

页面刷新或路由跳转时，父组件的onMounted钩子是在组件挂载完成后才发起API请求，而子组件ProductSingle.vue会先于数据加载完成进行渲染。此时productDetails初始值为null或空对象，直接访问productDetails.image.data.attributes.url这种多层嵌套属性，就会触发Cannot read properties of null (reading 'data')错误。

初始加载正常是因为首次进入时可能存在接口缓存，或者路由跳转时父组件数据已提前就绪，子组件渲染时数据已存在；但刷新页面会重置所有组件状态，数据加载滞后于子组件渲染，导致报错。

可行解决方案 #

1. 使用可选链操作符（?.）防御性访问 #

在子组件的模板或脚本中，用可选链操作符跳过null/undefined的属性访问，避免报错：

<!-- 子组件模板中 -->
<img :src="productDetails?.image?.data?.attributes?.url" alt="产品图片" />

如果是在组合式函数useGetProductImage中，也要加上判断：

// useGetProductImage.js
export function useGetProductImage(product) {
  return product?.image?.data?.attributes?.url || ''
}

2. 子组件内条件渲染，确保数据就绪后再渲染 #

在子组件中通过v-if判断数据是否存在，仅当productDetails和嵌套的image都就绪时，才渲染图片及相关内容：

<template>
  <div class="product-single">
    <div v-if="productDetails && productDetails.image">
      <img :src="productDetails.image.data.attributes.url" alt="产品图片" />
      <!-- 其他产品详情内容 -->
    </div>
    <div v-else>
      <!-- 加载状态提示 -->
      加载中...
    </div>
  </div>
</template>

3. 父组件延迟渲染子组件，直到数据加载完成 #

在父组件中，用v-if包裹子组件，确保productData获取完成后再渲染子组件，从根源避免子组件拿到空数据：

<template>
  <div class="single-product-view">
    <ProductSingle v-if="productData" :productDetails="productData" />
    <div v-else>加载产品数据中...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import ProductSingle from './ProductSingle.vue'

const route = useRoute()
const productData = ref(null)

onMounted(async () => {
  // 从动态路由获取产品ID
  const productId = route.params.id
  // 调用Strapi API获取数据
  const response = await fetch(`/your-strapi-api-url/products/${productId}`)
  productData.value = await response.json()
})
</script>

4. 给productDetails设置合理的初始值 #

在父组件中，给productData设置一个符合结构的初始空对象，而不是null，避免第一层访问就报错：

// 父组件中
const productData = ref({
  image: {
    data: {
      attributes: {
        url: ''
      }
    }
  }
})

这种方式适合能明确数据结构的场景，确保子组件渲染时每一层都有默认值。

内容的提问来源于stack exchange，提问作者András Zsellő