React中useTranslation无法显示嵌套翻译内容的问题

问题出在你设置了keySeparator: false，这个配置会禁用i18next通过点号解析嵌套键的功能。但你在组件中使用keyPrefix: "NESTING_PARENT"时，t函数会自动将前缀与传入的键拼接成NESTING_PARENT.CHILD字符串，由于keySeparator被禁用，i18next不会把这个字符串解析为嵌套对象的路径，而是将其当作一个完整的键去查找，找不到对应翻译值时就会输出键名本身。

解决方案一：启用键分隔符 #

移除keySeparator: false配置（默认值就是.，会自动启用嵌套键解析），修改后的i18n配置如下：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        NESTING_PARENT: {
          CHILD: 'Some text'
        }
      },
    },
  },
  lng: "en",
  debug: false,
  interpolation: {
    escapeValue: false,
    formatSeparator: ",",
  },
  react: {
    useSuspense: false,
  },
});

组件代码无需修改，就能正常渲染Some text。

解决方案二：保留keySeparator: false时的写法 #

如果因为业务需求必须禁用键分隔符（比如键名本身包含点号），可以通过数组形式指定嵌套路径，不用keyPrefix：

function MyComponent() {
  const { t } = useTranslation();
  return <div>{t(["NESTING_PARENT", "CHILD"])}</div>;
}

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