NextJs - 从 getStaticPaths 返回了额外的键

Question

我正在使用 NextJs 处理一个客户的项目，在博客部分，我们有不同的路径，blog/[:category]、blog/[:category]/[:post] 和 blog/author/[:author] 为了完成这个，我使用 getStaticPaths 和 getStaticProps.

我首先从 ContentfulAPI 获取所有帖子和作者，然后循环到它们中以创建一个有效路径以将其传递到路径数组中

Ps：当我单独对每条路径进行硬编码时它会起作用..

这就是我的职能：


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,
  }
}

当我尝试访问博客时出现此错误 link :

error - Error: Additional keys were returned from `getStaticPaths` in page "/blog/[...blog_post]". URL Parameters intended for this dynamic route must be nested under the `params` key, i.e.:

        return { params: { blog_post: ... } }

Keys that need to be moved: 0, 1, 2, 3, 4, 5, 6, 7, 8.

    at C:\Workspace\phoenix-v2\next\new-phoenix\node_modules\next\dist\build\utils.js:518:23
    at Array.forEach (<anonymous>)
    at Object.buildStaticPaths (C:\Workspace\phoenix-v2\next\new-phoenix\node_modules\next\dist\build\utils.js:492:17)    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  type: 'Error',
  page: '/blog/[...blog_post]'
}

我不确定为什么我运行会陷入这个错误.. 谢谢你的帮助！

Answer 1

您当前正在传递一个带有参数的数组，请使用扩展运算符 (...) 将其缩减。 Docs

return {
  paths: [...blogPosts, ...authorPaths],
  ...
};

NextJs - 从 getStaticPaths 返回了额外的键

NextJs - Additional keys were returned from getStaticPaths

javascript

path

next.js