React TypeScript项目集成i18next国际化时出现缺失Key错误及直接显示Key问题求助

我来帮你搞定这个i18next的问题！你遇到的显示Key、控制台报missing key的情况，大概率是配置和文件路径的问题，咱们一步步来排查修复：

1. 翻译文件位置与加载路径不对 #

i18next-http-backend是通过HTTP请求加载静态翻译文件的，你现在把locales文件夹放在src目录下是不行的——src里的文件会被webpack编译打包，没法直接通过HTTP访问到。

修复方法： #

• 把src/locales整个文件夹移到项目根目录的public文件夹下，这样翻译文件就变成了可直接访问的静态资源。
• 同时修改i18n.ts里的backend.loadPath，去掉前面的./，用绝对路径：

  backend: {
    loadPath: "/locales/{{lng}}/translation.json",
  },
  

2. 类型定义文件的路径可能有误 #

看你的react-i18next.d.ts，如果这个文件是放在项目根目录下，那当前的import路径是对的；但如果它在src目录里，就得调整路径：

// 假设d.ts在src目录下，修改import路径
import en from "./locales/en/translation.json";
import fa from "./locales/fa/translation.json";

另外别忘了检查tsconfig.json的include数组，确保它包含了这个类型定义文件，比如加上"./react-i18next.d.ts"或者"./src/**/*.d.ts"（如果d.ts在src里）。

3. 等翻译加载完再渲染组件 #

如果组件在i18n还没加载好翻译文件就渲染，会暂时显示Key并触发警告。有两种办法解决：

方法一：用Suspense包裹根组件 #

在你的入口文件（比如index.tsx）里：

import { Suspense } from 'react';
import i18n from './i18n';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Suspense fallback={<div>加载中...</div>}>
    <App />
  </Suspense>,
);

方法二：给useTranslation加wait选项 #

在使用翻译的组件里：

const { t, i18n } = useTranslation(undefined, { wait: true });

这样组件会等翻译加载完成后再渲染。

4. 检查翻译文件的JSON格式 #

确保你的translation.json是有效的JSON，比如你给的示例是对的：

{ "Hello": "Hello World" }

别犯低级错误，比如加多余的逗号（trailing comma），不然文件加载会失败。

最后验证一下 #

改完之后重启开发服务器，然后：

• 打开浏览器开发者工具的Network标签，看看有没有/locales/en/translation.json的请求，状态码是不是200
• 控制台还会不会报missing key的警告
• 组件能不能正确显示翻译后的文本

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