React集成i18next多语言时Hook调用错误求助

核心配置排查 #

1. 确认i18n上下文提供者正确包裹根组件 #

检查index.js，必须用I18nextProvider（或ReactI18nextProvider，取决于你用的包）完整包裹App组件，且确保i18n实例初始化完成后再渲染组件。正确示例：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import i18n from './i18n';
import { I18nextProvider } from 'react-i18next';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>
);

如果缺少这个提供者，组件调用useTranslation时会找不到上下文，直接触发Cannot read properties of null (reading 'useContext')错误。

2. 检查i18n配置的初始化逻辑 #

打开你的i18n配置文件，确保调用了i18n.init()且配置参数正确。示例：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en.json';
import zh from './locales/zh.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      zh: { translation: zh }
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: { escapeValue: false }
  });

export default i18n;

若未调用init或配置参数错误，上下文会处于未激活状态，同样引发上下文读取错误。

Header组件调用逻辑排查 #

1. 确保useTranslation在函数组件顶层调用 #

useTranslation作为React钩子，必须在函数组件的顶层作用域调用，不能放在条件判断、循环、嵌套函数或类组件中。正确写法：

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

const Header = () => {
  // 必须在组件顶层调用，不能在if/else、useEffect回调等内部
  const { t } = useTranslation();

  return (
    <header>
      <h1>{t('header.title')}</h1>
    </header>
  );
};

export default Header;

如果你的Header是类组件，需改用withTranslation高阶组件：

import React from 'react';
import { withTranslation } from 'react-i18next';

class Header extends React.Component {
  render() {
    const { t } = this.props;
    return (
      <header>
        <h1>{t('header.title')}</h1>
      </header>
    );
  }
}

export default withTranslation()(Header);

2. 检查依赖版本兼容性 #

react-i18next与i18next版本需匹配（比如react-i18next v13+要求i18next v22+），版本不兼容会触发钩子调用错误。执行以下命令更新到兼容版本：

npm install i18next@latest react-i18next@latest

最后验证步骤 #

1. 重启开发服务器（缓存可能导致配置不生效）
2. 检查浏览器控制台是否有locale文件加载失败等附加报错
3. 确认所有使用useTranslation的组件均为函数组件，且钩子调用在顶层

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