独立React组件接入react-i18next时已加载翻译仍报missingKey错误排查

异常观测现象 #

• 控制台可观测到翻译资源正常加载的日志，但始终触发i18next的missingKey报错
• 即便在i18n初始化回调函数中调用t('pinDescription')，也会收到“命名空间fin尚未加载，不应在初始化完成前调用t函数”的错误提示，与react-i18next官方文档中“初始化回调会在翻译加载完成后执行”的描述存在偏差
• 额外观测的行为差异：
  • 开启Suspense时，控制台可见翻译加载日志但仍触发missingKey报错
  • 关闭Suspense时，控制台完全无翻译加载的相关日志
  • 全程无网络请求报错，对应翻译JSON文件可直接通过浏览器正常访问

已完成的基础配置 #

• 核心i18n配置：通过i18next-chained-backend对接接口路径的翻译资源，配置了浏览器语言检测逻辑、默认命名空间规则、插值适配、Suspense支持能力
• 业务组件实现：通过Suspense包裹目标组件，使用useTranslation钩子渲染目标翻译内容

已尝试的排查方案 #

• 将i18n初始化逻辑封装为Promise，在组件内同步等待加载完成
• 使用高阶组件接入翻译能力
• 导出独立i18n实例，在组件内手动触发初始化，分别测试了同步等待、Promise回调两种初始化触发方式
• 以上所有方案均未解决原有异常

核心待解问题 #

在没有完整React应用入口、仅使用单组件注入非React系统的场景下，如何正确等待i18n初始化与翻译资源加载完成，避免在组件内调用翻译函数时出现missingKey错误？

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