Next.js配置getStaticPaths后构建阶段动态路由预渲染报错求助

关于[...id]语法的疑问解答 #

[...id]是Next.js的全捕获动态路由，用来匹配多级嵌套路径（比如/firm/123/reviews这类需要多个动态参数的路径）。你当前的路径是单级动态参数/firm/[id]，完全不需要用[...id]，现有[id].js的文件命名是正确的。

报错根源 #

两个动态路由构建失败，都是静态数据读取、路径生成的逻辑错了：

• 遍历firms目录下的JSON文件时，每个文件解析后的内容是数组，最终返回的firms是「数组套数组」的嵌套结构
• getStaticPaths里写的firms[0].map(...)只取了第一个JSON文件里的企业数据，其余文件里的企业id完全没生成静态路径，构建校验不通过
• 页面组件里的取值逻辑props.firms[0].filter(...)，同样只从第一份文件的数据里筛企业，其余id对应的企业数据取不到，渲染时触发空值报错

具体修复步骤 #

1. 合并所有数据源文件的内容 #

把目录下所有JSON文件的内容展开合并成一维数组，不要保留嵌套结构，替换你现有数据读取的map逻辑：

const allFirms = filenames.flatMap((filename) => {
  const filePath = path.join(process.cwd(), filename)
  const fileData = JSON.parse(fs.readFileSync(filePath, 'utf8'))
  // 单个文件如果存了多条数据就展开，单条数据就直接返回
  return Array.isArray(fileData) ? fileData : [fileData]
})

2. 修正getStaticPaths的路径生成 #

不要仅取第一份文件的数据，用合并后的全量数据生成路径：

export async function getStaticPaths() {
  const postsDirectory = path.join(process.cwd(), 'firms')
  const filenames = fs.readdirSync(postsDirectory)
  // 用上面的合并逻辑得到全量企业数组
  const allFirms = filenames.flatMap(...)

  return {
    // 遍历全量企业生成所有id对应的静态路径
    paths: allFirms.map(firm => ({ params: { id: firm.id } })),
    fallback: true // 如果不需要预生成全量路径可以保留，否则设为false
  };
}

3. 修正页面取值逻辑 #

不要从嵌套的firms[0]里筛选，直接用全量数据匹配当前路由id，加空值兜底避免页面崩溃：

const Profile = (props) => {
  // 从全量企业数组里匹配当前路由的id
  const firm = props.firms.find(item => item.id === props.router.query.id)
  // 找不到数据时先返回加载提示，不要直接渲染空对象
  if (!firm) return <div>Loading...</div>
  // 原有渲染逻辑完全不变
}

4. 优化getStaticProps传参 #

现在的getStaticProps没有接收路由参数，把所有企业数据都传到页面上，既浪费带宽也不符合静态生成逻辑，改成直接传当前id对应的单条数据：

export async function getStaticProps({ params }) {
  const postsDirectory = path.join(process.cwd(), 'firms')
  const filenames = fs.readdirSync(postsDirectory)
  const allFirms = filenames.flatMap(...)

  // 直接匹配当前路由id对应的企业数据
  const currentFirm = allFirms.find(firm => firm.id === params.id)

  return {
    props: {
      firm: currentFirm,
    },
  };

对应页面取值也可以简化，直接用传进来的单条数据：

const Profile = (props) => {
  const firm = props.firm
  if (!firm) return <div>Loading...</div>
  // 原有渲染逻辑不变
}

5. 修复/taxfaqs/[id]路由 #

该路由的报错逻辑和/firm/[id]完全一致，按照上面的步骤修正对应文件的数据源读取、路径生成、页面取值逻辑即可。

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