Next.js 13中coverageData始终为undefined问题求助

以下是几个排查和解决方向：

1. 修复API请求的错误处理 #

你的getCoverage函数没有处理HTTP错误状态（比如404、500），fetch在遇到这类状态时不会主动抛出错误，只会返回一个状态异常的响应，此时res.json()可能返回无效数据甚至undefined，导致最终传递给组件的props异常。修改api.ts：

export async function getCoverage() {
  const res = await fetch("api-endpoint");
  // 检查请求是否成功
  if (!res.ok) {
    throw new Error(`API请求失败，状态码：${res.status}`);
  }
  const data = await res.json();
  return data;
}

2. 确认路由模式匹配 #

getServerSideProps仅在Pages Router中生效（即文件放在pages/目录下）。如果你的app.tsx是在App Router的app/目录下，这个函数完全不会被执行，自然无法传递props。

如果是App Router，直接在组件中异步获取数据（App Router组件默认是Server Component）：

import { getCoverage } from "./api/(landing-page)/api";

async function PageHome() {
  let coverageData = null;
  try {
    coverageData = await getCoverage();
  } catch (error) {
    console.error("获取覆盖数据失败：", error);
  }
  console.log(coverageData);

  return (
    // 组件内容
  );
}

export default PageHome;

3. 验证API端点的正确性 #

检查api-endpoint是否为有效地址：

• 如果是外部API，确保是完整的URL（比如https://xxx.com/api/coverage）
• 如果是Next.js内部API路由，服务器端fetch需要使用绝对路径（比如http://localhost:3000/api/coverage），或者在Next.js 13+中可以直接用相对路径但要确保路由存在

4. 增加日志定位问题 #

在关键位置添加日志，确认数据流向：

• 在getCoverage中打印响应状态和返回数据
• 在getServerSideProps的try块中打印coverageData，确认是否真的获取到了数据

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