Javascript Next.js:嵌套动态路由的GetStaticPath

Javascript Next.js:嵌套动态路由的GetStaticPath,javascript,reactjs,next.js,static-site-generation,Javascript,Reactjs,Next.js,Static Site Generation,假设您拥有以下数据结构: 常数数据={ 职位:[{ id:1, 标题:职位1 slug:post-1 }, { id:2, 标题:职位2 slug:post-2 }], 评论:[{ id:1, posted:post-1, 正文:第1篇的评论1 }, { id:2, posted:post-1, 正文:第1篇评论2 }, { id:3, posted:post-2, 正文:第2篇评论1 }] } 您有以下路线/帖子/[postId[/[commentId] 因此,下一个.js结构文件夹是:pos

假设您拥有以下数据结构:

常数数据={ 职位:[{ id:1, 标题:职位1 slug:post-1 }, { id:2, 标题:职位2 slug:post-2 }], 评论:[{ id:1, posted:post-1, 正文:第1篇的评论1 }, { id:2, posted:post-1, 正文:第1篇评论2 }, { id:3, posted:post-2, 正文:第2篇评论1 }] } 您有以下路线/帖子/[postId[/[commentId] 因此,下一个.js结构文件夹是:posts/[postId]/[commented].js

然后需要为该路由生成静态路径

我的代码如下:

导出异步函数GetStaticPath{ const{posts,comments}=data const path=posts.mappost=>{ 回复评论 .filtercomment=>comment.postId==post.slug .mapcomment=>{ 返回{ 参数:{ posted:post.slug, commentId:comment.id } } } } } 但它不起作用。抛出的错误是:

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

        return { params: { postId: ..., commentId: ... } }

Keys that need to be moved: 0, 1.
如何将数据映射或循环到正确的返回格式?
提前感谢!

问题似乎是您从getStaticPaths返回的数据形状错误:

[
  [ { params: {} }, { params: {} } ],
  [ { params: {} } ]
]
正确的形状是:

[
  { params: {} },
  { params: {} },
  { params: {} }
]
刚试过这个,效果很好

    export async function getStaticPaths() {
      const paths = data.comments.map((comment) => {
        return {
          params: {
            postId: comment.postId,
            commentId: comment.id
          }
        }
      });
    
      console.log(paths);
    
      return {
        paths,
        fallback: false
      }
    };
它生成3个URL:

/员额/员额-1/1 /员额/员额-1/2 /员额/员额-2/3
这就是您需要的吗?

问题似乎是您从getStaticPaths返回的数据形状错误:

[
  [ { params: {} }, { params: {} } ],
  [ { params: {} } ]
]
正确的形状是:

[
  { params: {} },
  { params: {} },
  { params: {} }
]
刚试过这个,效果很好

    export async function getStaticPaths() {
      const paths = data.comments.map((comment) => {
        return {
          params: {
            postId: comment.postId,
            commentId: comment.id
          }
        }
      });
    
      console.log(paths);
    
      return {
        paths,
        fallback: false
      }
    };
它生成3个URL:

/员额/员额-1/1 /员额/员额-1/2 /员额/员额-2/3
这就是你所需要的吗?

就像提到@Aaron一样,问题在于过滤器y el映射的双数组

 return {
    paths: [
        { params: { id: '1' } },
        { params: { id: '2' } }
      ],
      fallback: ...
}

Doc就像提到@Aaron一样,问题在于过滤器y el映射的双数组

 return {
    paths: [
        { params: { id: '1' } },
        { params: { id: '2' } }
      ],
      fallback: ...
}

Doc Thx@Aaron!你让我看到了,通过无意义地双重映射数组。我已经在评论中看到了帖子的id!Thx@Aaron!你让我看到了,通过无意义地双重映射数组。我已经在评论中看到了帖子的id!