React/TypeScript中useTranslation失效，显示翻译key而非内容

环境版本 #

"i18next": "22.4.9",
"react-i18next": "12.1.4"

现有配置与代码 #

i18n配置文件（config.js） #

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

i18n.use(initReactI18next).init({
  fallbackLng: 'en',
  lng: 'en',
  resources: {
    en: {
      translations: require('./locales/en/translations.json')
    }
  },
  ns: ['translations'],
  defaultNS: 'translations'
});

i18n.languages = ['en'];

export default i18n;

翻译文件（i18n/locales/en/translations.json） #

{    
    "errorMessage": "Please try again later."
}

App.tsx代码 #

import { useTranslation } from 'react-i18next';

const App = () => {
    const { t } = useTranslation();
    return (<>
        {t('errorMessage')}
    </>)
}

export default App

运行后页面显示errorMessage而非预期翻译文本，以下是排查和解决步骤：

排查与解决步骤 #

• 确保项目入口引入了i18n配置
  必须在项目入口文件（如index.tsx/main.tsx）中导入i18n配置，否则i18n未完成初始化，无法读取翻译资源。示例：

  // index.tsx
  import './i18n/config'; // 导入你的i18n配置文件
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root')!);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  

• 检查翻译文件路径是否正确
  确认require('./locales/en/translations.json')的相对路径是否匹配文件实际位置。若配置文件不在i18n目录下，路径会出错。可在浏览器控制台查看是否有资源加载失败的报错，或调整为绝对路径测试。

• 验证i18n初始化状态
  在配置的init方法中添加回调，确认资源是否加载成功：

  i18n.use(initReactI18next).init({
    // 原有配置项
    callback: (err, t) => {
      if (err) console.error('i18n初始化失败:', err);
      console.log('测试翻译:', t('errorMessage')); // 若输出正确文本，说明资源加载正常
    }
  });
  

• 显式指定命名空间
  尽管已设置defaultNS: 'translations'，仍可尝试在useTranslation中显式传入命名空间：

  const { t } = useTranslation('translations');
  

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