如何检查Next-intl中是否存在指定翻译键？

背景场景 #

官方示例代码运行正常，但传入不存在的翻译键时，控制台会抛出MISSING_MESSAGE错误：

示例代码 #

en.json

{
  "About": {
    "title": "About us"
  }
}

About.jsx

import {useTranslations} from 'next-intl';
function About() {
  const t = useTranslations('About');
  return <h1>{t('title')}</h1>;
}

尝试过项目相关的Issue 448和Issue 88，未找到彻底解决方法，现寻求优雅可靠的翻译键存在性检查方案。

可行解决方案 #

1. 利用内置exists方法（next-intl v3+） #

next-intl v3及以上版本中，useTranslations返回的翻译实例自带exists方法，可直接检查键是否存在：

import {useTranslations} from 'next-intl';
function About() {
  const t = useTranslations('About');
  
  // 检查指定键是否存在
  const hasValidTitle = t.exists('title');
  const hasInvalidKey = t.exists('invalidKey');

  return (
    <div>
      <h1>{hasValidTitle ? t('title') : '默认标题'}</h1>
      <p>{hasInvalidKey ? t('invalidKey') : '默认内容'}</p>
    </div>
  );
}

2. 自定义检查函数（兼容旧版本） #

若使用旧版next-intl，可通过useIntl获取当前命名空间的翻译数据，手动实现检查逻辑：

import {useTranslations, useIntl} from 'next-intl';
function About() {
  const t = useTranslations('About');
  const intl = useIntl();
  const namespaceMessages = intl.messages.About;

  // 自定义键检查函数
  const isTranslationKeyExist = (key) => {
    return Object.prototype.hasOwnProperty.call(namespaceMessages, key);
  };

  return (
    <h1>{isTranslationKeyExist('title') ? t('title') : '默认标题'}</h1>
  );
}

3. 全局配置缺失消息处理 #

如果不想逐个检查，可在next-intl初始化时配置全局错误处理，避免控制台报错同时返回默认值：

// i18n.ts 初始化文件
import {createI18nClient} from 'next-intl';

export default createI18nClient({
  // 其他配置（如 locales、messages 等）
  onMissingMessage: ({namespace, key}) => {
    console.warn(`翻译键缺失：${namespace}.${key}`);
    // 返回占位符或默认文本
    return `[${key}]`;
  }
});

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