Nuxt3 script setup中useAsyncData无法在if判断正确取值？

问题原因 #

你遇到的核心问题是useAsyncData返回的data是响应式Ref对象，直接通过werk.uid访问的是Ref对象本身的属性，而非实际的文档数据，所以始终为空。另外，Prismic的getByUID在找不到文档时会直接抛出错误，未处理的话会触发500错误而非预期的404。

修正后的代码 #

<script setup>
const route = useRoute()
const name = route.params.werke;
const { client } = usePrismic()

const { data: werk } = await useAsyncData('werk', async () => {
  try {
    // 尝试获取Prismic文档
    return await client.getByUID("werk", name)
  } catch (error) {
    // 捕获Prismic返回的404错误，返回null以便后续判断
    if (error.status === 404) {
      return null
    }
    // 其他错误继续抛出，保留原有错误处理逻辑
    throw error
  }
})

// 先判断响应式数据是否存在，再检查uid字段
if (!werk.value || !werk.value.uid) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}
</script>

关键修正点 #

• 访问响应式数据必须用.value：useAsyncData的data是Ref包装的响应式对象，只有通过.value才能获取到实际的Prismic文档数据。
• 捕获Prismic请求错误：getByUID在找不到对应UID的文档时会抛出404错误，在请求函数内捕获该错误并返回null，避免直接触发500错误，再通过后续判断主动抛出404。
• 双重判断兜底：先检查werk.value是否存在（处理请求失败返回null的情况），再检查uid字段，确保无数据时正确触发404。

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