如何在Next.js的getStaticPaths中仅返回过滤后的路径？

错误翻译 #

构建错误发生
错误：在页面"/product/[packageAlias]"的getStaticPaths中返回了额外的键。此动态路由的URL参数必须嵌套在params键下。

问题原因 #

你用filter的时候逻辑写错了——filter的回调函数需要返回布尔值（true/false）来决定是否保留当前元素，而你直接返回了路径对象。这导致最终的paths数组里混入了不符合要求的内容，触发了Next.js的校验错误。

正确代码 #

先过滤出激活状态的文章，再用map生成规范的路径结构：

export async function getStaticPaths() {
  const { data } = await axios.get(`${url}/category`, config);

  // 先过滤出isActive为true的文章，再生成路径
  const paths = data
    .filter((post) => post.isActive)
    .map((post) => ({
      params: { postId: post.id },
    }));

  return {
    paths,
    fallback: false
  }
}

代码说明 #

• filter((post) => post.isActive)：筛选出isActive为true的文章，返回一个仅包含有效文章的数组。
• map：对过滤后的数组逐个生成符合Next.js要求的路径对象，确保每个元素都是{ params: { postId: ... } }的结构。

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