Next.js与Strapi集成使用getStaticPaths时的参数错误问题求助

看起来你遇到的核心问题是页面路由参数名和代码里使用的参数名不匹配，还有几个小细节需要调整，我来一步步帮你解决：

问题根源分析 #

你的页面文件是pages/categories/[category].js，这意味着Next.js期望的路由参数名是category，但你在getStaticPaths和getStaticProps里都用了id作为参数名，这就导致Next.js找不到它需要的category参数，从而抛出那个错误。另外，还有几处细节会影响请求发送和数据渲染：

• getStaticPaths里的params键名错误，应该是category而不是id
• getStaticProps里使用了params.id，但实际应该是params.category
• 渲染组件时，categories.papers是一个数组，直接访问categories.papers.name会报错，需要遍历或者取第一个元素

修改后的完整代码 #

function Category({ category }) {
  return (
    <>
      <h1>{category.name}</h1>
      {/* papers是数组，这里遍历显示所有关联的论文 */}
      <div>
        <h2>相关论文:</h2>
        {category.papers.map(paper => (
          <div key={paper.id}>
            <h3>{paper.name}</h3>
            <p>{paper.description}</p>
            <a href={`http://localhost:1337${paper.PDF_link}`} target="_blank" rel="noopener noreferrer">
              下载PDF
            </a>
          </div>
        ))}
      </div>
    </>
  )
}

export async function getStaticPaths() {
  const res = await fetch('http://localhost:1337/Categories')
  const categories = await res.json()
  console.log(categories);
  // 这里的params键名必须和页面文件名[category]一致，用category而不是id
  const paths = categories.map((category) => ({
    params: { category: category.id.toString() },
  }))
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  // 这里用params.category而不是params.id，因为参数名是category
  const res = await fetch(`http://localhost:1337/Categories/${params.category}`)
  const category = await res.json()
  console.log(category)
  return { props: { category } }
}

export default Category

关键修改点说明 #

1. 参数名统一：页面文件名是[category].js，所以getStaticPaths生成的params必须包含category字段，getStaticProps里也要通过params.category获取这个值，这样Next.js才能正确匹配路由。
2. 数组数据处理：Strapi返回的papers是一个数组（即使只有一个元素），所以不能直接categories.papers.name，需要用map遍历或者category.papers[0].name来访问单个元素。
3. 变量命名规范：把categories改成category（单数），因为我们获取的是单个分类的数据，这样代码更易读。

验证步骤 #

1. 重启Next.js开发服务器，确保代码修改生效
2. 访问http://localhost:3000/categories/1，现在应该能看到分类名称和对应的论文列表了
3. 查看Strapi控制台，应该能看到Next.js发送的请求记录了

这样修改后，你的路由参数匹配问题就能解决，同时也能正确渲染Strapi返回的关联数据。

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