Next.js getStaticPaths构建时生成不存在路径问题求助

问题现象 #

• 访问「Folder 1」外的路由（[docsSlug].js）正常，但进入「Catch All Routes」（[...subDocsSlug].js）的文件夹路由时，页面刷新会出现undefined错误
• 构建项目时，系统尝试生成「Folder 1」内的路径，但缺少/folder-1/路径段：例如错误生成/docs/art-inside-folder-1，正确路径应为/docs/folder-1/art-inside-folder-1，同时会额外生成错误路径

相关代码 #

GraphQL 查询代码

export const DOCS = gql`
  query {
    docArticles(sort: "customSort") {
      data {
        attributes {
          Title
          Slug
          AdditionalDocs {
            Title
            Slug
          }
        }
      }
    }
  }
`;

[...subDocsSlug].js 中的 getStaticPaths 代码

export const getStaticPaths = async () => {
  const { data } = await client.query({
    query: DOCS,
  });

  const docs = data?.docArticles?.data;

  const paths = docs.map((path) => {
    return path.attributes.AdditionalDocs.map((subPath) => {
      
      return { params: { subDocsSlug: [subPath.Slug] } }
    });
  });

  const mergedPaths = paths.flat(1);

  return {
    paths: mergedPaths || null,
    fallback: false,
  };
};

核心错误是getStaticPaths生成路径参数时，未包含父级文档的Slug（对应folder-1的路径段）。

在Next.js的catch-all路由[...subDocsSlug]中，subDocsSlug是路径分段的数组。要生成/docs/folder-1/art-inside-folder-1，subDocsSlug需要是['folder-1', 'art-inside-folder-1']，但当前代码只传入了子文档的Slug，导致路径缺少父级分段，同时刷新时路由参数无法匹配正确数据源，引发undefined错误。

修复后的getStaticPaths代码 #

export const getStaticPaths = async () => {
  const { data } = await client.query({
    query: DOCS,
  });

  const docs = data?.docArticles?.data;

  const paths = docs.map((parentDoc) => {
    const parentSlug = parentDoc.attributes.Slug;
    return parentDoc.attributes.AdditionalDocs.map((subDoc) => {
      // 组合父级Slug与子文档Slug作为完整路径分段
      return { params: { subDocsSlug: [parentSlug, subDoc.Slug] } }
    });
  });

  const mergedPaths = paths.flat(1);

  return {
    paths: mergedPaths || [], // 用空数组替代null更安全
    fallback: false,
  };
};

额外注意事项 #

• 同步修改getStaticProps：通过subDocsSlug数组的两个元素（父级Slug、子文档Slug）查询对应内容，否则刷新页面仍会出现undefined错误
• 检查路由链接生成逻辑：确保所有跳转至子文档的链接都正确拼接父级路径段，避免生成错误的跳转地址

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