Google Translate Cloud API 提供官方 /languages 端点，可直接获取实时、权威、结构化语言列表（含语言名称与 ISO-639-1/BCP-47 代码），彻底替代硬编码数组，确保多语言下拉菜单始终与 Google 官方支持保持同步。

google translate cloud api 提供官方 `/languages` 端点，可直接获取实时、权威、结构化语言列表（含语言名称与 iso-639-1/bcp-47 代码），彻底替代硬编码数组，确保多语言下拉菜单始终与 google 官方支持保持同步。

在 React 应用中动态构建语言选择器时，手动维护长达 100+ 项的语言名称与代码映射（如 ["Afrikaans", "Albanian", ...] 和 ["af", "sq", ...]）不仅易出错、难维护，更无法响应 Google 后续新增或调整语言（例如 2026 年新增的“Kabyle”或弃用旧代码）。幸运的是，Google Cloud Translation API 原生提供标准化语言发现接口：

✅ 官方推荐方式：调用 /languages REST 端点

发送 GET 请求至：

https://translation.googleapis.com/language/translate/v2/languages?key=YOUR_API_KEY

该接口返回 JSON 响应，结构清晰、字段标准：

Google SEO GEO Auto Index

Google索引API工具。用于提交URL以供Google索引。支持两种模式：“auto-index”（获取sitemap，与缓存对比差异并提交...）

下载

{
  "languages": [
    { "language": "af", "name": "Afrikaans" },
    { "language": "sq", "name": "Albanian" },
    { "language": "am", "name": "Amharic" },
    { "language": "ar", "name": "Arabic" },
    ...
  ]
}

? 注意：此端点仅适用于 Google Cloud Translation API（v2/v3），不适用于免费的 translate.googleapis.com 轻量接口（后者无语言发现能力）。

? 在 React 中安全集成（带错误处理与加载状态）

import { useEffect, useState } from 'react';
import axios from 'axios';

const LanguageSelector = () => {
  const [languages, setLanguages] = useState<{ language: string; name: string }[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchLanguages = async () => {
      try {
        const API_KEY = process.env.REACT_APP_GOOGLE_TRANSLATE_API_KEY;
        if (!API_KEY) throw new Error("Missing GOOGLE_TRANSLATE_API_KEY");

        const res = await axios.get(
          'https://translation.googleapis.com/language/translate/v2/languages',
          { params: { key: API_KEY, target: 'en' } } // target=可选，用于返回本地化语言名（如设为 'zh-CN' 则 name 为中文）
        );

        // ✅ 按字母顺序排序，提升 UX
        const sorted = res.data.languages.sort((a: any, b: any) => 
          a.name.localeCompare(b.name)
        );
        setLanguages(sorted);
      } catch (err) {
        console.error('Failed to fetch languages:', err);
        setError('无法加载语言列表，请检查 API 密钥与网络连接');
      } finally {
        setLoading(false);
      }
    };

    fetchLanguages();
  }, []);

  if (loading) return <select disabled><option>加载语言中...</option></select>;
  if (error) return <select disabled><option>{error}</option></select>;

  return (
    <>
      <select id="from">
        {languages.map(({ language, name }) => (
          <option key={`from-${language}`} value={language}>
            {name} ({language})
          </option>
        ))}
      </select>
      <select id="to">
        {languages.map(({ language, name }) => (
          <option key={`to-${language}`} value={language}>
            {name} ({language})
          </option>
        ))}
      </select>
    </>
  );
};

export default LanguageSelector;

⚠️ 关键注意事项

• 必须启用 Cloud Translation API：前往 Google Cloud Console 启用该服务，并为项目绑定计费账户（免费额度：前 50 万字符/月）；
• API Key 权限最小化：建议使用专用服务账号密钥 + IAM 角色 roles/translate.editor，而非主项目密钥；
• 缓存策略建议：语言列表极少变更，可在客户端 localStorage 缓存 7 天，减少重复请求；
• BCP-47 兼容性：返回的 language 字段已符合 BCP-47 标准（如 "zh-TW"、"pt-BR"），可直接用于翻译请求，无需额外转换；
• 无 Token 依赖：该端点不需 tk 参数或复杂签名，纯 RESTful，兼容任何 HTTP 客户端（fetch/axios/node-fetch）。

? 替代方案对比（不推荐但需知晓）

方案	是否官方	实时性	稳定性	推荐度
/languages 端点（本文方案）	✅ 是	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐	★★★★★
硬编码双数组（提问中方式）	❌ 否	⚠️ 静态，易过期	⚠️ 维护成本高	★☆☆☆☆
解析网页 DOM（如 translate.google.com）	❌ 否	⚠️ 易被反爬中断	❌ 极低	☆☆☆☆☆

通过采用官方 /languages 接口，你不仅能一键解决语言列表同步难题，更将应用的国际化基础设施提升至生产级标准——简洁、可靠、可审计、可持续演进。