我正在使用具有动态路由本地化功能的新 App Router（应用程序目录）开发 Next.js 15 应用程序。我有一个 [locale] 目录，在其中处理多种语言路由，并使用 params 对象来访问区域设置值。但是，在尝试访问 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 // Root layout for [locale] dynamic route
│ └── page.tsx // Main page component for [locale] dynamic route
locales/
├── en/
│ └── common.json // English translations
├── lt/
│ └── common.json // Lithuanian translations
i18Config.js // i18n configuration with available locales
i18n.js // i18n initialization file
TranslationsProvider.js // Translation provider component
middleware.js // Middleware to handle locale-based redirection
在 app/[locale]/layout.tsx 中，我想从 params 访问区域设置值并将其传递给不同的组件。我尝试了各种方法来访问参数，但错误仍然存在。
这是我的layout.tsx 文件的样子：
import "@/styles/global.css";
import { Outfit } from "next/font/google";
import { Providers } from "./providers";
import i18nConfig from "../../i18nConfig";
import { dir } from "i18next";
const outfit = Outfit({
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700", "800"],
style: ["normal"],
});
export function generateStaticParams() {
return i18nConfig.locales.map((locale) => ({ locale }));
}
export default async function RootLayout({
children,
params: { locale },
}: {
children: React.ReactNode;
params: { locale: string };
}) {
return (
<html
lang={locale}
dir={dir(locale)}
suppressHydrationWarning
className={outfit.className}
>
<body className="bg-background">
<Providers>{children}</Providers>
</body>
</html>
);
}
该错误表明 params 应该被“等待”，即使 params 是一个对象而不是一个 Promise，所以等待 params 在这里没有意义。 我看到其他帖子提到异步函数中的解构可能会导致 Next.js 中的参数出现问题，但直接访问参数对我来说也不起作用。 每次更改后重新启动服务器也没有解决问题。
如何在动态路由布局中正确访问 params.locale 而不会出现此错误？是否有我缺少的解决方法或配置？任何见解将不胜感激。谢谢！
这是正确的，这是一个错误，您可以使用“use”钩子来正确等待参数来解决此问题。这是一个例子：
import { use } from "react";
export default function RootLayout({children, params }: { children: React.ReactNode; params: Promise<{ locale: string }> }) {
const { locale } = use(params);
return()
}
让我知道它是否适合您。