Next.js 14中next-intl的getMessageFallback客户端组件传参错误

问题原因 #

你的LocaleLayout默认是Server Component，而getMessageFallback是普通函数，Next.js 14的App Router不允许直接从Server Component向Client Component传递未标记的函数，这就是报错的根源。另外useMessages是客户端钩子，本身就要求组件是Client Component，之前没加'use client'已经违反了规则。

解决方案 #

1. 在文件顶部添加'use client'指令，将LocaleLayout转为Client Component；
2. 调整getMessageFallback的逻辑，满足缺失翻译时返回key的需求。

修改后的完整代码 #

'use client'; // 关键：标记为Client Component
import { NextIntlClientProvider, useMessages, IntlErrorCode } from "next-intl";

function getMessageFallback({ namespace, key, error }) {
  // 当翻译缺失时，直接返回key（比如NOT_EXISTS_TEST）
  if (error.code === IntlErrorCode.MISSING_MESSAGE) {
    return key;
  } 
  // 其他错误情况返回带路径的提示
  const path = [namespace, key].filter(part => part != null).join(".");
  return `Dear developer, please fix this message: ${path}`;
}

export default function LocaleLayout({ children, params }) {
  const { locale } = params;
  const messages = useMessages();

  return (
    <NextIntlClientProvider
      locale={locale}
      messages={messages}
      getMessageFallback={getMessageFallback}
    >
      {children}
    </NextIntlClientProvider>
  );
}

说明 #

• 添加'use client'后，组件转为客户端组件，函数可以正常传递给NextIntlClientProvider；
• 调整后的getMessageFallback在遇到MISSING_MESSAGE错误时，直接返回key值，符合你要的回退逻辑；
• 其他错误场景保留原有的提示，方便开发排查问题。

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