如何在useAsyncData获取Sanity数据后正确配置useSeoMeta避免首次加载报错？

问题核心是useAsyncData是异步操作，首次进入页面时数据还未获取完成，data的值为null，直接访问data.value[0]会触发类型错误；第二次访问时数据已被缓存，因此能正常渲染。

以下是几种可行的修复方案：

方案一：使用可选链操作符+默认值 #

通过?.避免访问不存在的属性时抛出错误，同时设置加载状态下的默认文本：

const { data } = useAsyncData('category', () => sanity.fetch(
  query, { categoryId: route.params.id }
));

useSeoMeta({
  title: () => data?.value?.[0]?.title ? `${data.value[0].title} Card Prices & List` : 'Loading Card Category...',
  description: () => data?.value?.[0]?.description || 'Loading card price details...'
});

方案二：利用pending状态判断加载状态 #

解构useAsyncData返回的pending属性，明确区分加载中和加载完成的状态：

const { data, pending } = useAsyncData('category', () => sanity.fetch(
  query, { categoryId: route.params.id }
));

useSeoMeta({
  title: () => pending ? 'Loading Card Category...' : `${data.value[0].title} Card Prices & List`,
  description: () => pending ? 'Loading card price details...' : data.value[0].description
});

方案三：添加数据存在性检查 #

在回调函数中先判断数据是否有效，再返回对应内容：

const { data } = useAsyncData('category', () => sanity.fetch(
  query, { categoryId: route.params.id }
));

useSeoMeta({
  title: () => {
    if (!data?.value || data.value.length === 0) return 'Loading Card Category...';
    return `${data.value[0].title} Card Prices & List`;
  },
  description: () => {
    if (!data?.value || data.value.length === 0) return 'Loading card price details...';
    return data.value[0].description;
  }
});

这些方案都能确保在数据加载完成前不会触发错误，同时给用户展示合理的加载提示。

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