Next.JS中getStaticProps未向pages目录页面返回数据问题求助

第一步：校验API返回结构是否匹配 #

• 先在getStaticPaths和getStaticProps里加console.log打印返回的data变量，构建时查看终端输出的内容：
  • 确认getStaticPaths里的data.result是否存在、是否是数组结构，如果你的API返回的列表不是存放在result字段下，比如直接返回的data本身就是数组，那data.result.map会直接报错，导致路径生成失败
  • 确认getStaticProps里返回的data是否包含course_name字段，很多时候后端返回的字段名可能是驼峰格式courseName或者其他命名，和你前端取值的字段不匹配就会显示为空
• 新增错误捕获逻辑，避免fetch失败静默报错：

// 以getStaticProps修改为例
export const getStaticProps = async (context) => {
  try {
    const id = context.params.id;
    const res = await fetch('https://[server]/course/' + id);
    // 先判断请求状态是否正常
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`)
    const data = await res.json();
    // 打印返回值，构建时直接在终端查看内容
    console.log('接口返回数据：', data)
    return {
      props: { course: data }
    }
  } catch (err) {
    console.error('拉取数据报错：', err)
    return {
      notFound: true
    }
  }
}

第二步：确认文件命名符合Next.js动态路由规则 #

• pages目录下的这个动态路由文件必须命名为[id].js，如果你的文件名是其他格式比如details.js或者course_[id].js，路由参数匹配不到，context.params.id就会是undefined，导致请求地址错误

第三步：检查构建阶段的网络可达性 #

• getStaticProps和getStaticPaths是在**构建阶段（build time）**运行的，请求是从你构建代码的机器发出去的，不是用户端浏览器。要确认你构建代码的服务器/本地电脑能不能正常访问这个托管数据库的API地址，有些托管数据库会做IP白名单限制，你本地swagger能访问不代表构建服务器的IP在白名单里
• 如果是开发环境运行next dev，直接看终端的打印日志就能看到请求报错信息

第四步：校验参数传递正确性 #

• 确认getStaticPaths里取的ID字段是对的：如果你的数据库主键不是_id而是id，course._id就会是undefined，生成的路径参数就不对，后续getStaticProps拿错误的ID去请求自然拿不到数据

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