Nuxt 3中asyncData函数无法获取博客详情问题求助

问题诊断 #

你的代码存在几个关键问题导致数据无法正常填充：

• 参数引用错误：asyncData 解构得到的是 params，但代码中错误使用了 route.params.slug，导致请求筛选条件无效，无法获取目标博客数据。
• 无错误处理机制：未对异步请求和数据处理过程添加异常捕获，出现错误时无法定位问题根源。
• 数据结构处理不当：response.items 是数组，直接 map 后返回的仍是数组，但博客详情应为单个对象，后续模板渲染可能无法正确识别。
• 字段访问风险：直接链式访问嵌套字段（如 item.fields.featuredImage.fields.file.url），若某个字段不存在会触发报错中断流程。

修正后的代码 #

export async function asyncData({ params }) {
  function getCustomDate(passedDate) {
    const date = new Date(passedDate);
    const year = date.getFullYear();
    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    const month = months[date.getMonth()];
    const dt = date.getDate();

    return `${dt} ${month}, ${year}`;
  }

  try {
    // 修正：使用解构得到的 params.slug
    const response = await client.getEntries({
      content_type: 'blog',
      'fields.slug': params.slug
    });

    // 取第一个条目（博客详情应为单条数据）
    const blogItem = response.items[0];
    if (!blogItem) {
      throw new Error('博客内容不存在');
    }

    const renderOptions = {
      renderNode: {
        [BLOCKS.EMBEDDED_ENTRY]: (node, children) => {
          if (node.data.target.sys.contentType.sys.id === "codeBlock") {
            return `<pre><code>${node.data.target.fields.code}</code></pre>`;
          }

          if (node.data.target.sys.contentType.sys.id === "videoEmbed") {
            return `<iframe
              src='${node.data.target.fields.embedUrl}'
              height='100%'
              width='100%'
              frameBorder='0'
              scrolling='no'
              title='${node.data.target.fields.title}'
              allowFullScreen=true
            ></iframe>`;
          }
        },
        [INLINES.HYPERLINK]: (node, next) => {
          if (node.data.uri.includes("player.vimeo.com/video")) {
            return `<div class="iframe-container">
              <iframe
                title="${next(node.content)}"
                src="${node.data.uri}"
                frameBorder='0'
                allowFullScreen
              ></iframe>
            </div>`;
          } else if (node.data.uri.includes("youtube.com/embed")) {
            return `<div class="iframe-container">
              <iframe
                title="${next(node.content)}"
                src="${node.data.uri}"
                allow='accelerometer; encrypted-media; gyroscope; picture-in-picture'
                frameBorder='0'
                allowFullScreen
              ></iframe>
            </div>`;
          } else {
            return `<span class="color">
              <a href="${node.data.uri}">${next(node.content)}</a>
            </span>`;
          }
        },
        [BLOCKS.EMBEDDED_ASSET]: (node, children) => {
          const imgUrl = node.data.target.fields.file.url;
          const altText = node.data.target.fields.description || '';
          return `<div class="content-img"><img
            src="https:${imgUrl}"
            width='100%'
            alt="${altText}"
          /></div>`;
        },
      },
    };

    const { id, createdAt } = blogItem.sys;
    const { title, description, details, featuredImage } = blogItem.fields;
    // 可选链处理，避免字段不存在报错
    const featuredImageUrl = featuredImage?.fields?.file?.url || '';
    const contentHtml = documentToHtmlString(details, renderOptions);
    const customDate = getCustomDate(createdAt);

    return {
      blogDetails: {
        id, title, featuredImage: featuredImageUrl, description, details: contentHtml, createdAt, customDate
      }
    };
  } catch (error) {
    // 打印错误便于排查
    console.error('获取博客详情失败:', error);
    // 返回空数据或错误状态
    return { blogDetails: null };
  }
}

关键修改点说明 #

1. 修正参数引用：将 route.params.slug 改为 params.slug，匹配 asyncData 上下文提供的参数。
2. 添加错误捕获：用 try/catch 包裹异步请求和数据处理逻辑，出错时打印日志并返回兜底数据。
3. 调整数据结构：直接取 response.items[0] 作为单条博客数据，避免返回数组导致模板渲染问题。
4. 字段安全访问：对嵌套字段使用可选链（?.），并设置默认值，防止字段缺失引发报错。
5. 优化代码格式：移除多余换行，保持代码整洁，同时修正 iframe 标签闭合问题。

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