Next.js中getStaticPaths返回额外键报错求助——多动态路由场景下的路径生成问题

这个问题我之前也碰到过！核心原因是你在paths里不小心嵌套了数组，Next.js没法正确解析这种结构。

先看报错信息：它提示你返回的getStaticPaths里有额外的键（0、1、2...），这是因为你把blogPosts和authorPaths这两个数组直接作为元素放到了paths数组里，导致paths变成了二维数组：

paths: [
  [{ params: {...} }, { params: {...} }], // blogPosts数组
  [{ params: {...} }] // authorPaths数组
]

而Next.js要求paths必须是一个一维数组，每个元素都是单独的{ params: {...} }对象，不能嵌套数组。

修正后的代码 #

只需要用ES6扩展运算符把两个数组合并成一个一维数组就行：

export const getStaticPaths = async () => { 
  const posts = await DataController.getEntriesByContentType( 
    "componentBlog", 
  ); 
  const blogPosts = posts.items.map(item => { 
    return {params: {blog_post: [item.fields.category.replace(/\s+/g, '-').replace(/'/g, '').toLowerCase(), item.fields.slug]}} 
  }) 
  const authors = await DataController.getEntriesByContentType( 
    "author", 
  ); 
  const authorPaths = authors.items.map(item => { 
    return {params: {blog_post: ['author', item.fields.slug]}} 
  }) 
  return { 
    // 用扩展运算符合并两个数组，得到一维的路径集合
    paths: [...blogPosts, ...authorPaths], 
    fallback: false, 
  } 
}

为什么这样能解决问题？ #

扩展运算符...blogPosts会把blogPosts数组里的每一项都展开成paths数组的直接元素，同理...authorPaths也是一样。最终paths会变成一个包含所有博客路径和作者路径的一维数组，每个元素都是符合要求的{ params: { blog_post: [...] } }对象，Next.js就能正确解析这些动态路径了。

你之前手动硬编码路径正常，就是因为手动写的是一维数组，而循环生成后没合并数组才导致了嵌套问题。

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