Astro集成i18next新版本报错：Cannot read properties of undefined (reading 'map')

问题分析 #

报错源于astro-i18next的LanguageSelector.astro组件中，i18next.languages为undefined，导致调用map方法失败。这通常是因为i18next实例初始化时机滞后，或组件未正确获取到配置的支持语言列表。

解决方案 #

1. 确保astro-i18next配置中明确声明支持语言 #

在astro.config.mjs的集成配置里，必须显式设置supportedLngs，这是i18next识别支持语言的核心配置：

// astro.config.mjs
import { defineConfig } from 'astro/config';
import astroI18next from 'astro-i18next';

export default defineConfig({
  integrations: [
    astroI18next({
      i18next: {
        supportedLngs: ['en', 'zh-CN', 'ja'], // 替换为你的目标语言
        fallbackLng: 'en',
      },
      // 其余配置保持与示例一致
    }),
  ],
});

2. 自定义LanguageSelector组件，避免依赖i18next.languages #

官方组件的问题在于直接依赖i18next.languages，我们可以自己封装组件，从i18next配置中读取支持语言：

---
import { useAstroI18next } from 'astro-i18next';
const { i18next, changeLanguage } = useAstroI18next();
// 从i18next配置中直接取支持语言列表
const supportedLanguages = i18next.options.supportedLngs;
---

<div class="language-switcher">
  {supportedLanguages.map(lang => (
    <button
      key={lang}
      onClick={() => changeLanguage(lang)}
      class={`lang-btn ${i18next.language === lang ? 'active' : ''}`}
    >
      {lang.toUpperCase()}
    </button>
  ))}
</div>

之后直接使用这个自定义组件即可，无需依赖官方的LanguageSelector。

3. 手动传递支持语言列表给官方组件 #

如果坚持使用官方组件，可在调用时手动传入supportedLanguages属性，绕过组件内部的错误逻辑：

---
import LanguageSelector from 'astro-i18next/components/LanguageSelector.astro';
// 与astro.config中声明的语言列表保持一致
const supportedLanguages = ['en', 'zh-CN', 'ja'];
---

<LanguageSelector supportedLanguages={supportedLanguages} />

需要注意：若官方组件后续更新修复此问题，可换回默认用法。

关键说明 #

i18next.languages是i18next初始化后生成的运行时语言列表，而i18next.options.supportedLngs是你明确配置的静态列表，后者更可靠，不会因初始化时机问题出现undefined。

内容的提问来源于stack exchange，提问作者NaN-Simon