React i18next从API加载多语言时存储结构异常问题排查

出现结构错配是两个默认行为叠加导致的：

• i18next 默认以 translation 作为全局默认命名空间，搭配 i18next-http-backend 使用时，插件默认预期单次请求拿到的是单个语言、单个命名空间下的平铺翻译键值对，而非包含所有语言的全量字典对象
• 你自定义的backend请求逻辑没有匹配插件的加载规则：不管i18next当前发起的是哪个语言的加载请求，你都把接口返回的全量多语言包整个回传，i18next会把这份全量数据原封不动存到当前加载任务对应的路径——也就是 fallback 语言en下的translation命名空间里，自然就出现了多层嵌套的错误结构。

方案1：移除HttpBackend，直接注入全量资源（最适配你的接口场景） #

你的接口本身一次性返回所有支持语言的翻译内容，完全不需要走HttpBackend按语言、命名空间分次加载的逻辑，直接在接口返回后手动把资源注入i18n即可，代码参考：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { languageService } from "services";

const fallbackLng = ["en"];
const { getDictionary } = languageService;

i18n
  .use(LanguageDetector) 
  .use(initReactI18next) 
  .init({
    fallbackLng,
    supportedLngs: ["en", "cn", "jp"], // 和接口返回的语言key保持一致
    resources: {},
    interpolation: {
      escapeValue: false // React自带XSS转义，不需要i18next重复处理
    }
  });

// 拉取全量字典后批量注入资源
getDictionary().then(res => {
  Object.entries(res).forEach(([lang, translations]) => {
    i18n.addResourceBundle(lang, "translation", translations, true, true);
  });
});

export const i18nextConfig = i18n;

这个方案没有多余的加载逻辑，不会出现重复请求，完全匹配你当前的接口返回格式。

方案2：保留HttpBackend，适配返回格式 #

如果你有特殊需求必须保留HttpBackend，就在请求回调里根据i18next当前要加载的目标语言，返回对应语言的片段即可，不要直接回传全量对象：

i18n
  .use(HttpBackend) 
  .use(LanguageDetector) 
  .use(initReactI18next) 
  .init({
    fallbackLng,
    supportedLngs: ["en", "cn", "jp"],
    backend: {
      allowMultiLoading: false,
      request: (options: any, url: any, payload: any, callback: any) => {
        try {
          // 这里建议加一层缓存，避免i18next多次触发request时重复请求接口
          getDictionary().then(res => {
            const targetLang = options.lng;
            callback(null, {
              data: res[targetLang] || {},
              status: 200
            });
          });
        } catch (e) {
          console.error(e);
          callback(null, {
            status: 500
          });
        }
      },
    }
  });

注意：这个方案下i18next会按支持的语言数量多次触发request回调，一定要加字典缓存，不然会重复调用接口。

内容的提问来源于stack exchange，提问作者Lorenzo Del Rosario