使用next-intl文档的layout.tsx出现TypeError错误求助

1. 修复参数解构的默认值问题 #

错误核心是当params未被正确传递时，直接解构params: { locale }会因读取undefined的属性抛出异常。需给解构参数设置默认值：

修改布局组件的参数解构逻辑，给嵌套的解构对象设置默认空对象：

export default async function LocaleLayout({
  children,
  params: { locale } = {},
}: Props) {
  let messages;
  try {
    // 额外校验locale是否存在，避免无效路径导入
    if (!locale) notFound();
    messages = (await import(`../../messages/${locale}.json`)).default;
  } catch (error) {
    notFound();
  }

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

或者先给params整体设置默认值，再解构locale：

export default async function LocaleLayout({
  children,
  params = {},
}: Props) {
  const { locale } = params;
  if (!locale) notFound();
  
  let messages;
  try {
    messages = (await import(`../../messages/${locale}.json`)).default;
  } catch (error) {
    notFound();
  }

  // 返回内容不变
}

2. 验证路由结构配置 #

确保布局文件路径为app/[locale]/layout.tsx，只有这样Next.js才会将generateStaticParams返回的locale参数正确注入到布局组件中，否则params会因路由结构不匹配无法传递。

3. 优化Props类型定义（可选） #

将locale的类型从any改为具体枚举值，提升代码类型安全性：

type Locale = 'en' | 'de';

interface Props {
  children: React.ReactNode;
  params?: {
    locale: Locale;
  };
}

内容的提问来源于stack exchange，提问作者Tuan Huynh Vo