Next.js 15动态路由布局中params.locale报错问题求助

问题描述 #

使用Next.js 15的App Router（app目录），通过[locale]动态路由实现本地化时，在app/[locale]/layout.tsx中访问params.locale持续触发以下错误：

Error: Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at locale (webpack:///app/[locale]/layout.tsx?a262:30:34)

应用目录结构：

app/
├── [locale]/
│   ├── layout.tsx            // [locale]动态路由的根布局
│   └── page.tsx              // [locale]动态路由的主页组件
locales/
├── en/
│   └── common.json           // 英文翻译文件
├── lt/
│   └── common.json           // 立陶宛语翻译文件
i18Config.js                  // 包含可用语言的国际化配置
i18n.js                       // 国际化初始化文件
TranslationsProvider.js       // 翻译提供者组件
middleware.js                 // 处理语言重定向的中间件

已尝试但无效的操作：

• 在函数体直接提取params.locale为单独常量
• 使用generateStaticParams预生成en、lt语言路由
• 为params添加自定义TypeScript类型

核心困惑：错误提示要求await params，但params是普通对象而非Promise，直接访问同样触发错误。

解决方案 #

这个错误的核心原因是：Next.js 15 App Router中，params是懒加载对象，其属性读取属于异步操作（即使对象本身不是Promise），不能在组件顶层同步代码中直接访问。

方案1：服务器组件转为异步函数 #

如果你的layout.tsx是服务器组件（无'use client'指令），只需将组件函数标记为async，即可正常访问params.locale：

import TranslationsProvider from '../../TranslationsProvider';

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  // 直接解构或访问属性即可，底层会处理异步加载逻辑
  const { locale } = params;

  return (
    <TranslationsProvider locale={locale}>
      {children}
    </TranslationsProvider>
  );
}

方案2：客户端组件用useEffect延迟访问 #

如果是客户端组件（添加了'use client'指令），需要通过useEffect在组件挂载后再读取params.locale：

'use client';

import { useEffect, useState } from 'react';
import TranslationsProvider from '../../TranslationsProvider';

export default function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const [locale, setLocale] = useState('');

  useEffect(() => {
    setLocale(params.locale);
  }, [params]);

  return (
    <TranslationsProvider locale={locale}>
      {children}
    </TranslationsProvider>
  );
}

额外注意事项 #

• 确保generateStaticParams返回的locale值与i18Config.js中的可用语言完全一致：

export async function generateStaticParams() {
  return [{ locale: 'en' }, { locale: 'lt' }];
}

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