Nuxt3中useLazyAsyncData因数据结构报错，求简化结构实现骨架屏

问题根源 #

1. 你用Promise.all包裹单个请求，导致返回结果被包装成数组，这是第一个[0]层级的来源
2. Contentful的getEntries返回结构自带items数组，这是第二个[0]层级的来源
3. useLazyAsyncData处于pending状态时entry.value为null，直接访问entry.value[0]会触发TypeError

修正后的代码 #

const {
  data: entry,
  pending,
  error,
} = await useLazyAsyncData('entry', async () => {
  try {
    // 移除多余的Promise.all，直接发起单个请求
    const response = await $contentful.getEntries({
      content_type: 'blog',
      limit: 1,
      'fields.slug': slug,
    });
    // 提取目标数据，直接返回fields对象，消除[0]层级
    return response.items?.[0]?.fields || null;
  } catch (err) {
    console.error(err);
    return null;
  }
});

// 现在可直接通过entry.value.title访问标题
const blogs = toRaw(entry.value);
console.log(blogs);

关键优化点 #

• 移除Promise.all：单个请求无需用Promise.all包裹，避免结果被包装成数组
• 直接提取目标字段：用可选链?.避免空值报错，直接返回fields对象，后续可直接通过entry.value.title访问内容
• 完善错误处理：通过try/catch捕获请求异常，返回null避免未捕获Promise错误
• 保留pending状态：useLazyAsyncData的pending状态可正常用于骨架屏加载逻辑

多请求场景兼容（如果需要） #

如果后续要处理多个Contentful请求，可在Promise.all后拆解数组再提取目标数据：

const { data: entry } = await useLazyAsyncData('entry', async () => {
  try {
    const [blogRes, otherRes] = await Promise.all([
      $contentful.getEntries({ content_type: 'blog', limit: 1, 'fields.slug': slug }),
      // 其他Contentful请求
    ]);
    return blogRes.items?.[0]?.fields || null;
  } catch (err) {
    console.error(err);
    return null;
  }
});

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