Next.js 13中generateStaticParams报错：缺少字符串类型locales参数

报错提示Error: A required parameter (locales) was not provided as a string in generateStaticParams for /[locales]的原因是路由动态参数名和generateStaticParams返回的参数名不匹配：你的路由文件是/[locales]，但代码中generateStaticParams返回的是locale字段，Next.js无法识别对应关系。

修复步骤： #

1. 修改generateStaticParams的返回结构，把参数名从locale改为locales，和路由文件名一致：

export function generateStaticParams(): { params: { locales: string } }[] {
    return [{ params: { locales: 'en' } }, { params: { locales: 'de' } }];
}

2. 同步更新组件的参数处理，有两种方式：
   • 方式一：直接把组件内的变量名全部改成locales：

export default async function LocaleLayout({
    children,
    params: { locales },
}: {
    children: React.ReactNode;
    params: { locales: string };
}) {
    if (typeof locales !== 'string') {
        return notFound();
    }

    let messages;
    try {
        messages = (await import(`@/messages/${locales}.json`)).default;
    } catch (e) {
        return notFound();
    }

    return (
        <html lang={locales}>
            <body>
                <NextIntlClientProvider locale={locales} messages={messages}>
                    {children}
                </NextIntlClientProvider>
            </body>
        </html>
    );
}

• 方式二：通过解构重命名保留原变量名locale，避免大面积修改代码：

export default async function LocaleLayout({
    children,
    params: { locales: locale },
}: {
    children: React.ReactNode;
    params: { locales: string };
}) {
    if (typeof locale !== 'string') {
        return notFound();
    }

    let messages;
    try {
        messages = (await import(`@/messages/${locale}.json`)).default;
    } catch (e) {
        return notFound();
    }

    return (
        <html lang={locale}>
            <body>
                <NextIntlClientProvider locale={locale} messages={messages}>
                    {children}
                </NextIntlClientProvider>
            </body>
        </html>
    );
}

核心逻辑是保证generateStaticParams返回的参数键名，和路由动态文件名[xxx]中的xxx完全一致，Next.js才能正确关联静态生成的参数与路由。

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