使用createInstance初始化i18n时resolvedLanguage返回undefined问题排查

核心问题原因 #

你创建了独立的i18n实例i18Instance，但子组件中导入的i18next是全局默认实例，二者是完全独立的对象。自定义实例的初始化状态和语言解析结果不会同步到默认实例上，所以直接访问i18next.resolvedLanguage会得到undefined。

解决方法 #

方法1：在子组件中导入自定义实例 #

不要使用全局默认的i18next，直接导入你自己创建并导出的实例：

// 替换成你实际的配置文件路径
import i18Instance from './i18n-config';

console.log('log..', i18Instance.resolvedLanguage);

方法2：等待实例初始化完成后再访问 #

init方法是异步执行的，如果在实例尚未完成初始化时就访问resolvedLanguage，也会得到undefined。可以通过回调确保初始化完成：
修改你的i18n配置文件：

const i18Instance = i18n.createInstance();

i18Instance
  .use(initReactI18next)
  .use(I18nextBrowserLanguageDetector)
  .init({
    detection: {
      order: ['navigator'],
    },
    resources,
    debug: true,
    fallbackLng: 'de',
    interpolation: {
      escapeValue: false,
      format: (value, format, lng) => {
        if (format === 'capitalize') {
          const firstLetter = value.charAt(0).toLocaleUpperCase(lng);
          return firstLetter + value.slice(1);
        }
        return value;
      },
    },
    returnNull: false,
  }, (err) => {
    if (err) console.error(err);
    // 初始化完成后可正常访问resolvedLanguage
    console.log(i18Instance.resolvedLanguage);
  });

export default i18Instance;

方法3：结合React-i18next的Provider和Hooks（React项目推荐） #

如果是React项目，需要将自定义实例通过I18nextProvider注入应用，再用官方Hooks获取语言信息，更贴合React生命周期：

1. 在根组件中注入实例：

import { I18nextProvider } from 'react-i18next';
import i18Instance from './i18n-config';

ReactDOM.render(
  <I18nextProvider i18n={i18Instance}>
    <App />
  </I18nextProvider>,
  document.getElementById('root')
);

2. 在子组件中用useTranslation获取实例：

import { useTranslation } from 'react-i18next';
import { useEffect } from 'react';

function YourComponent() {
  const { i18n } = useTranslation();
  
  useEffect(() => {
    console.log('log..', i18n.resolvedLanguage);
  }, []);

  return <div>你的组件内容</div>;
}

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