如何修复react-i18next中useTranslation在错误边界内触发的报错

问题根因 #

1. React 目前仅支持类组件作为错误边界，而useTranslation属于React钩子，只能在函数组件或自定义钩子中调用，直接在类组件形式的错误边界内调用钩子会违反Hook规则触发报错，导致i18n相关逻辑崩溃，无法获取翻译文本。
2. 你配置了i18next-http-backend插件，所有翻译资源为异步拉取，如果应用触发错误的时机早于i18n初始化完成、翻译资源加载完成的时间点，此时调用useTranslation无法获取到有效实例和翻译资源，抛出的异常会被错误边界自身捕获，导致错误展示逻辑失效。
3. 若错误边界用到的翻译对应的命名空间未提前加载，也会触发useTranslation的资源查找异常。

解决方案 #

方案1：保留useTranslation的调用 #

不要直接在错误边界类组件内调用钩子，将错误提示UI抽为独立的函数子组件，在子组件内调用useTranslation即可：

// 抽离的错误提示函数组件
const ErrorFallback = () => {
  const { t } = useTranslation();
  return <div>{t('error.boundary.tip')}</div>;
};

// 错误边界类组件内直接引用该子组件
class ErrorBoundary extends React.Component {
  // 原有错误边界逻辑不变
  render() {
    if (this.state.hasError) {
      return <ErrorFallback />;
    }
    return this.props.children;
  }
}

方案2：修复i18n异步加载时序问题 #

修改i18n初始化配置，关闭Suspense校验、提前预加载资源，避免加载未完成时触发异常：

i18next
  .use(initReactI18next)
  .use(HttpApi)
  .use(LanguageDetector)
  .init({
    // 原有配置保留，新增以下配置
    react: {
      useSuspense: false,
    },
    // 预加载所有支持的语言资源，避免用到时未加载
    preload: ["en", "ru"],
    // 错误边界用到的翻译放入defaultNS对应的命名空间中
    defaultNS: "translation",
  });

如果要完全规避初始化时序问题，可以在应用入口等待i18n初始化完成后再渲染根组件：

import i18n from './你的i18n配置文件路径';
import App from './App';

i18n.on('initialized', () => {
  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
});

注意事项 #

• 错误边界用到的翻译key务必放入默认加载的translation命名空间下，避免命名空间未加载导致翻译失败
• 开发环境下开启i18n的debug模式，可通过控制台输出的初始化、资源加载日志定位具体异常原因

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