如何用Strapi生成嵌套动态页面的多动态路径？

核心问题分析 #

你的代码在getStaticPaths中错误地将同一分类下的所有客户名称合并成了单个字符串，导致生成category/client1client2这类无效路径。正确的做法是为每个客户生成独立的路径对象，需要用flatMap替代map来展开嵌套的客户数组。

修改后的代码实现 #

1. 修复getStaticPaths生成正确路径 #

export const getStaticPaths = async () => {
    const categoryPathResponse = await fetcher(
        `${process.env.NEXT_PUBLIC_STRAPI_URL}/categories?populate=*`
    );
    const data = categoryPathResponse.data;

    // 使用flatMap展开每个分类下的客户，生成独立路径
    const paths = data.flatMap((categoryItem) => {
        const categorySlug = categoryItem.attributes.path.toString().toLowerCase();
        // 遍历当前分类下的所有客户，生成对应的路径参数
        return categoryItem.attributes.clients.map((client) => {
            // 处理客户名称为URL友好的slug（替换空格为短横线，转小写）
            const clientSlug = client.name.toLowerCase().replace(/\s+/g, "-");
            return {
                params: {
                    category: categorySlug,
                    client: clientSlug
                },
            };
        });
    });

    return {
        paths,
        fallback: false,
    };
};

2. 优化getStaticProps的API请求 #

你的API请求URL存在两个?符号（会导致参数解析错误），同时Strapi的过滤参数写法可以更规范：

export async function getStaticProps(context) {
    const { category, client } = context.params;

    // 修正URL中的多余?，并规范Strapi的过滤与填充语法
    const data = await fetcher(
        `${process.env.NEXT_PUBLIC_STRAPI_URL_BASE}/categories?filters[path][$eq]=${category}&filters[clients][name][$eq]=${client}&populate[clients][populate]=*`
    );

    return {
        props: { client: data },
    };
}

关键说明 #

• flatMap的作用：先对每个分类执行map生成客户路径数组，再将所有分类的路径数组合并成一个一维数组，确保每个客户对应一个独立的路径对象。
• 客户Slug处理：单独对每个客户的名称进行转小写、替换空格的操作，避免多个客户名称被拼接。
• API参数修正：移除多余的?，将客户过滤条件正确嵌套在filters[clients]下，确保Strapi能正确筛选出指定分类下的目标客户。

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