如何在getStaticPaths中匹配number对应的slug参数值

核心问题是你之前的两次查询把slug和chapter number的关联关系断开了，得调整GROQ查询，一次性拿到每个漫画对应的slug和所有章节编号，再生成对应的路径参数。

修改后的代码如下：

export async function getStaticPaths() {
  // 一次性获取每个漫画的slug和对应的所有章节number
  const comicsWithChapters = await client.fetch(`
    *[_type == "comic" && defined(slug.current)] {
      "slug": slug.current,
      "chapterNumbers": chapters[].number
    }
  `);

  // 把每个漫画的slug和它的每个章节number组合成路径参数
  const paths = comicsWithChapters.flatMap(comic => 
    comic.chapterNumbers.map(number => ({
      params: {
        slug: comic.slug,
        number: number.toString() // 确保number是字符串，Next.js路径参数要求字符串类型
      }
    }))
  );

  return {
    paths,
    fallback: false,
  };
}

关键说明： #

• 调整GROQ查询，直接从comic文档中同时取出slug和该漫画下所有章节的number，保证两者的关联关系不丢失。
• 使用flatMap遍历每个漫画，再用map把该漫画的每个章节编号和slug组合成独立的路径参数对象，最后扁平化数组得到所有需要预渲染的路径。
• 把number转为字符串，因为Next.js的params要求所有参数都是字符串类型，避免类型不匹配的问题。

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