Next.js中getStaticProps调用Twitch API返回空数组问题

核心问题排查 #

1. 组件Props接收方式错误 #

你的Games组件参数写法完全错误，Next.js会把getStaticProps返回的props作为第一个参数传递给组件，而非第二个。当前写法会导致你打印的props是Next.js的上下文对象，并非API返回的数据。

错误代码：

type Props = {};

function Games({}: Props, props:any) {
console.log(props)
// ...
}

修正后：

// 先定义正确的Props类型，包含接口返回的data字段
type Game = {
  id: string;
  name: string;
  box_art_url: string;
  // 补充你需要的其他字段
};

type Props = {
  data: {
    data: Game[];
  };
};

function Games({ data }: Props) {
  console.log(data); // 现在能正确拿到API返回的数据
  return <div></div>;
}

2. getStaticProps错误处理不完整 #

如果API请求抛出错误，你的catch块仅打印错误，但未返回props对象，这会导致Next.js无法生成页面，或传递空props。必须确保无论请求成功还是失败，getStaticProps都返回包含props的对象。

修正后的getStaticProps：

export async function getStaticProps() {
  try {
    const url = "https://api.twitch.tv/helix/games/top";
    const resp = await api.get(url);
    // axios的resp.data是同步值，无需await
    const data = resp.data;

    return {
      props: {
        data,
      },
    };
  } catch (error) {
    console.error("Twitch API请求失败:", error);
    // 失败时返回默认props，避免页面崩溃
    return {
      props: {
        data: { data: [] },
      },
    };
  }
}

3. 环境变量验证 #

虽然Postman能正常请求，但需确认Next.js服务端能否正确读取环境变量：

• 确保使用.env.local作为本地环境变量文件（Next.js官方推荐）
• 检查变量名拼写是否与Postman一致（比如TWITCH_API_KEY和TWITCH_BEARER）
• 环境变量无需加引号，.env.local示例：

  TWITCH_API_KEY=你的ClientID
  TWITCH_BEARER=你的Bearer令牌
  

4. Axios响应处理优化 #

你写了const data = await resp?.data;，但resp.data是同步值，无需await，直接写const data = resp.data即可，多余的await不会报错，但无必要。

验证步骤 #

1. 修正组件Props接收逻辑后，重启Next.js开发服务器（环境变量修改后需重启）
2. 查看服务器端控制台（而非浏览器控制台），确认getStaticProps是否打印错误或返回数据
3. 查看浏览器控制台的组件打印结果，确认数据是否正常

内容的提问来源于stack exchange，提问作者Matt Freelance Web