TS/ReactJS项目中i18n语言无法切换的问题求助

项目接入TypeScript后，原本正常运行的i18n国际化系统出现异常，调用i18n.changeLanguage([language])无法切换语言，暂未定位到问题原因。

相关代码 #

App组件代码 #

import "./App.css";
import React from "react";
import { Header } from "./Header/Header";
import { useTranslation } from "react-i18next";
import i18n from "./i18n";

export const App = () => {
  const { t } = useTranslation();

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <Header changeLanguage={changeLanguage} /> {/* 切换按钮在这里，功能正常 */}
      <Center t={t} />
    </div>
  );
};

i18n.ts配置文件 #

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import fr from "./assets/locales/fr/translation.json";
import en from "./assets/locales/en/translation.json";

export const defaultNS = "fr";
export const resources = {
  fr: { fr },
  en: { en },
};

i18n.use(initReactI18next).init({
  lng: "fr",
  fallbackLng: "fr",
  ns: ["fr", "en"],

  interpolation: {
    escapeValue: false,
  },
  defaultNS,
  resources,
});

export default i18n;

注：由于TypeScript中无法使用whitelist配置项，已替换为ns配置项。

问题分析与解决方案 #

核心问题点 #

1. 资源结构错误：resources格式不符合i18n要求，正确结构应为{ [语言代码]: { [命名空间]: 翻译内容 } }，当前将语言代码同时作为命名空间使用，导致资源映射混乱。
2. ns配置误用：ns是命名空间列表，不是支持的语言列表，错误填入语言代码会导致i18n无法识别各语言对应的翻译资源。
3. defaultNS设置错误：默认命名空间应与资源中的命名空间一致，而非语言代码。
4. 缺少支持语言配置：TypeScript中可使用supportedLngs替代原whitelist，用于指定系统支持的语言列表。

修正后的i18n.ts配置 #

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import fr from "./assets/locales/fr/translation.json";
import en from "./assets/locales/en/translation.json";

// 统一使用"translation"作为命名空间
export const defaultNS = "translation";
export const resources = {
  fr: { [defaultNS]: fr },
  en: { [defaultNS]: en },
};

i18n.use(initReactI18next).init({
  lng: "fr",
  fallbackLng: "fr",
  // 指定命名空间列表
  ns: [defaultNS],
  interpolation: {
    escapeValue: false,
  },
  defaultNS,
  resources,
  // TypeScript中用supportedLngs指定支持的语言，替代whitelist
  supportedLngs: ["fr", "en"]
});

export default i18n;

补充优化 #

在App组件中使用useTranslation时，建议明确指定命名空间，避免歧义：

const { t } = useTranslation(defaultNS);

确认切换语言时传入的参数（如"fr"、"en"）与supportedLngs中的值完全匹配，即可恢复语言切换功能。

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