useTranslation()在react-i18next中失效，仅显示翻译键

问题诊断 #

你遇到的t函数显示为notReadyT、翻译key直接输出的问题，核心原因包括：

• i18n实例初始化完成后，未同步响应Shopify Hydrogen的language变化；
• 初始化逻辑仅执行一次，后续语言切换时未更新i18n的语言配置；
• Suspense的包裹范围未覆盖所有依赖翻译的子组件，导致组件在翻译资源加载完成前就已渲染。

修复步骤 #

1. 重构TranslationProvider，监听language变化并同步i18n配置 #

移除单次初始化限制，新增语言切换逻辑，确保Hydrogen的语言变更能同步到i18n实例：

import React, {useState, useEffect} from 'react';
import {useLocalization} from '@shopify/hydrogen';
import {I18nextProvider} from 'react-i18next';
import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import resourcesToBackend from 'i18next-resources-to-backend';

// 打包默认翻译文件
import fr from '../assets/locales/fr/translation.json';

// 提前配置i18n插件，避免在Provider内重复执行
i18n
  .use(resourcesToBackend((language, namespace, callback) => {
    import(`../assets/locales/${language}/${namespace}.json`)
      .then((resources) => callback(null, resources))
      .catch((error) => callback(error, null));
  }))
  .use(LanguageDetector)
  .use(initReactI18next);

export function TranslationProvider({children}) {
  const {language} = useLocalization();
  const [i18nReady, setI18nReady] = useState(false);
  const currentLang = language.isoCode.toLowerCase();

  useEffect(() => {
    const syncI18nLanguage = async () => {
      // 未初始化则执行初始化，已初始化直接切换语言
      if (!i18n.isInitialized) {
        const cachedLang = localStorage.getItem('i18nextLng') || currentLang;
        await i18n.init({
          partialBundledLanguages: true,
          fallbackLng: currentLang,
          debug: true,
          react: {useSuspense: true, wait: true},
          ns: ['translation'],
          defaultNS: 'translation',
          interpolation: {
            escapeValue: false,
          },
          resources: {
            fr: {translation: fr},
          },
          lng: cachedLang,
        });
      } else {
        await i18n.changeLanguage(currentLang);
      }
      setI18nReady(true);
    };

    syncI18nLanguage();
  }, [language]);

  return i18nReady ? (
    <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
  ) : null;
}

2. 调整Suspense位置，确保子组件等待翻译加载 #

将Suspense移动到TranslationProvider内部，让所有依赖翻译的子组件都能等待资源加载完成：

<TranslationProvider>
  <Suspense fallback={'Loading lang..'}>
    <Router>
      <FileRoutes
        basePath={languageCode ? `/${languageCode}/` : undefined}
      />
      <Route path="*" page={<NotFound />} />
    </Router>
  </Suspense>
</TranslationProvider>

3. 组件内规范使用useTranslation #

明确指定namespace，确保翻译资源正确匹配：

import {useTranslation} from 'react-i18next';

const Footer = () => {
  const {t} = useTranslation('translation');
  return <div>{t('footer.language')}</div>;
};

export default Footer;

关键说明 #

• 移除了单次初始化限制，Hydrogen语言变更时会自动同步i18n配置；
• 通过i18n.isInitialized判断初始化状态，避免重复执行初始化逻辑；
• 调整Suspense位置，确保所有翻译依赖组件都能等待资源加载；
• 明确指定namespace，避免翻译资源匹配错误。

内容的提问来源于stack exchange，提问作者Jérôme Aublanc