react-i18next中useTranslation的t函数失效问题及解决方案

PS：该问题已解决。曾有用户回复但评论已删除，为帮助遇到相同问题的开发者，特此说明：移除resources中translation属性的{}后问题解决。

开发基于React和Material UI的项目时，集成react-i18n实现国际化功能。按官方文档配置i18n后，语言切换功能可正常触发（handleChangeLang函数打印显示切换成功），但翻译不生效，即t("Home")的值无法变更。相关代码如下：

i18n.js 代码 #

import React from "react";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enLocales from './enUS.json'
import znHKLocales from './zhHK.json'
import zhCNLocales from './zhCN.json'
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
    .use(initReactI18next) // passes i18n down to react-i18next
    .use(LanguageDetector)
    .init({
        resources: {
            enUS: { translation: { enLocales } },
            zhHK: { translation: { znHKLocales } },
            zhCN: { translation: { zhCNLocales } },
        },
        lng: localStorage.getItem('i18nextLng') || 'enUS', 
        fallbackLng: "enUS",
        saveMissing: false,
        returnObjects: true,
        debug: false,
        interpolation: {
            escapeValue: false 
        },
    });

export default i18n;

locales.js 代码（语言相关逻辑封装） #

import { useContext } from "react";
import React from 'react';
import { useTranslation } from 'react-i18next';
import LanguageContext from '../context/LanguageContext'
import { enUS, zhHK, zhCN } from '@mui/material/locale';


const useLangLocales = () => {
    const context = useContext(LanguageContext);
    const { i18n, t } = useTranslation();
    const currentLangStorage = localStorage.getItem('i18nextLng');

    const LANGS = [
        {
            label: t('English'),
            value: 'enUS',
            systemValue: enUS,
        },
        {
            label: t('Chinese (Hong Kong)'),
            value: 'zhHK',
            systemValue: zhHK,
        },
        {
            label: t('Chinese (Simplified)'),
            value: 'zhCN',
            systemValue: zhCN,
        },
    ];

    const handleChangeLang = (newLang) => {
        console.log('newlang ', newLang)
        i18n.changeLanguage(newLang.value);
        context.setLangMode(newLang.systemValue);
    }

    return {
        onChangeLang: handleChangeLang,
        allLang: LANGS,
        t, //I export the t here, it is imported from the useTranslation() hook above
        enUS,
    }
}

export default useLangLocales;

组件中使用翻译的代码 #

import * as React from 'react';
import { Container, Box, Typography, Button } from '@mui/material';
import useLangLocales from '../hooks/useLangLocales';

const Home = () => {
    const { t } = useLangLocales();

    return (
        <Container maxWidth="md">
            <Typography>{t("Home")}</Typography>
        </Container>
    )
}

export default Home;

index.js 代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import './locales/i18n'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

package.json 依赖 #

"i18next": "^22.4.14",
    "i18next-browser-languagedetector": "^7.0.1",
    "i18next-http-backend": "^2.2.0",

问题根源与解决方法 #

问题出在i18n.js的resources配置中，为translation属性包裹了多余的{}，导致翻译文件的结构被额外嵌套一层，react-i18n无法正确读取翻译键值。

修改后的resources配置应为：

resources: {
    enUS: { translation: enLocales },
    zhHK: { translation: znHKLocales },
    zhCN: { translation: zhCNLocales },
},

移除translation值外层的{}后，翻译即可正常生效。

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