如何在Next.js中修改Firebase UI手机号认证的默认界面语言

可行解决方案 #

你遇到的问题核心有三个：languageCode 设置语法错误、脚本加载时机不对、初始化时机早于语言包加载完成时间，按以下步骤修改即可：

• 修正 languageCode 赋值语法：Firebase Auth 的 languageCode 是挂载在 auth 实例上的属性，你之前少了 auth() 的调用，赋值无效
• 替换脚本引入方式：不要在 next/head 中加带 async 属性的脚本，会导致语言包加载晚于组件初始化，优先用 next/script 控制加载时机
• 调整初始化逻辑：确保语言包加载完成后再初始化 Firebase UI 组件

以下是修改后的完整代码：

import Script from 'next/script'
// 你的其他引入代码保持不变

class YourComponent extends React.Component {
  // 新增标识位判断语言包是否加载完成
  uiLoaded = false

  componentDidMount() {
    // 轮询判断语言包加载完成再初始化，避免加载未完成 fallback 到英文
    const initCheck = setInterval(() => {
      if (window.firebaseui && !this.uiLoaded) {
        // 正确设置语言代码
        firebase.auth().languageCode = 'vi'
        const uiConfig = {
          signInSuccessUrl: '/',
          signInOptions: [
            {
              provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
            },
          ],
          tosUrl: '/',
          // 可额外添加该配置强制指定语言
          // locale: 'vi'
        }
        const ui = new firebaseui.auth.AuthUI(firebase.auth())
        ui.start('#firebaseui-auth-container', uiConfig)
        this.uiLoaded = true
        clearInterval(initCheck)
      }
    }, 100)
  }

  render() {
    return (
      <>
        <Head>
          <link
            type="text/css"
            rel="stylesheet"
            href="https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth.css"
          />
        </Head>
        {/* 用next/script加载语言包，设置beforeInteractive保证页面可交互前加载完成 */}
        <Script
          src="https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth__vi.js"
          strategy="beforeInteractive"
        />
        <div id="firebaseui-auth-container"></div>
      </>
    )
  }
}

内容的提问来源于stack exchange，提问作者Huy Hoang Nguyen