如何为i18next的lng参数传入异步函数获取用户语言？

问题核心：i18next.init的lng参数不支持异步函数（包括返回Promise的函数），它需要同步的语言标识字符串，直接传异步函数会导致内部处理逻辑出错，出现你遇到的undefined is not a function错误。

正确的做法是先异步获取到语言值，再初始化i18next，具体实现步骤如下：

1. 编写异步函数获取目标语言：

   • 先判断用户登录状态
   • 已登录则调用接口获取用户语言，失败时回退到设备语言
   • 未登录直接使用设备语言

2. 拿到语言值后，再执行i18next.init初始化

代码示例 #

// 异步获取语言的函数
async function getUserLanguage() {
  const deviceLang = Localization.locale.substr(0, 2);
  try {
    // 假设这里有判断用户是否登录的逻辑，比如checkUserLoggedIn()
    if (checkUserLoggedIn()) {
      const res = await axios.get('user_lang');
      // 确保接口返回的是合法的语言标识（比如'en'、'zh'）
      return res.data.lang || deviceLang;
    }
  } catch (err) {
    // 接口请求失败时回退到设备语言
    console.error('获取用户语言失败:', err);
  }
  // 未登录或接口失败时返回设备语言
  return deviceLang;
}

// 先获取语言再初始化i18next
async function initI18n() {
  const lng = await getUserLanguage();
  await i18next.init({
    lng: lng,
    debug: true,
    fallbackLng: Localization.locale.substr(0, 2),
    resources: {
      en: {
        translation: {
          "key": "hello world"
        }
      },
      // 可按需添加其他语言资源
      zh: {
        translation: {
          "key": "你好世界"
        }
      }
    }
  });
  // 初始化完成后再执行后续业务逻辑
  console.log('i18next初始化完成');
}

// 调用初始化函数
initI18n();

补充说明 #

• 如果项目不支持顶层await，就把初始化逻辑放在async函数里调用，避免阻塞主线程
• 接口返回的语言标识要和resources里的key对应（比如'en'对应en资源），否则会触发fallbackLng
• 可以把用户语言缓存到本地存储（localStorage/sessionStorage），下次初始化时先读缓存，减少接口请求

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