使用@nuxtjs/strapi+Nuxt3+Strapi4时API对象获取异常求助

问题分析与修正方案 #

针对你遇到的两个问题，结合@nuxtjs/strapi的特性，给出以下修正方案：

1. 页面重载返回undefined的解决

页面重载时data?.value?.data为undefined，是因为初始渲染（尤其是服务端渲染阶段）时异步数据还未就绪，直接在setup顶层访问未完成的异步结果会导致取值失败。同时你原代码中直接拼接response?.attributes是错误的——attributes是对象，不是媒体文件的路径字段。

2. useAsyncData返回RefImpl对象的说明

useAsyncData的设计就是将异步结果包装为响应式Ref（即RefImpl），这是Nuxt3保证数据响应式和服务端渲染一致性的机制，属于正常行为。你需要通过data.value访问实际的API返回数据。

修正后的完整代码 #

<script setup>
const { findOne } = useStrapi() // 单类型数据用findOne更合适
const url = useStrapiUrl()
const kitUrl = ref('')

// 获取home-page单类型数据，关联kit_de_presse字段
const { data: homePageData, pending, refresh, error } = await useAsyncData(
  'home-page',
  () => findOne('home-page', { populate: ['kit_de_presse'] })
)

// 监听数据变化，自动更新kitUrl
watch(homePageData, (newData) => {
  if (newData?.data?.attributes?.kit_de_presse?.data) {
    // 拼接媒体文件的完整URL
    kitUrl.value = `${url}${newData.data.attributes.kit_de_presse.data.attributes.url}`
  }
}, { immediate: true }) // 立即执行一次，处理初始加载数据
</script>

关键注意点 #

• 如果你的home-page是Strapi的单类型（Single Type），务必用findOne替代find——find会返回数组格式的结果，而单类型数据用findOne直接返回单个对象，更符合业务逻辑。
• 确认Strapi后台中kit_de_presse字段已配置为媒体类型，且已上传对应的文件，否则kit_de_presse.data会为undefined。
• 通过watch配合immediate: true，确保无论页面重载还是热重载，只要数据就绪就会自动更新kitUrl，避免取值时机问题。

内容的提问来源于stack exchange，提问作者dolor3sh4ze