使用Firebase Web v9时出现firebaseui.auth is undefined报错如何解决

你遇到的报错核心原因是初始化参数使用了已废弃的v8全局语法，且FirebaseUI版本适配不到位，按照以下步骤调整即可： #

调整步骤 #

1. 替换FirebaseUI资源版本 #

保留你现有的所有Firebase v9模块化导入代码，仅需将<head>标签中的FirebaseUI资源替换为v6.0.2及以上的稳定版本：

<script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />

注意：当前FirebaseUI的CDN版本不属于ESM模块，不要使用import或require语法引入，通过script标签引入后会自动在全局挂载firebaseui对象

2. 修改初始化代码 #

你原有错误的初始化代码使用了v8的全局firebase.auth()写法，直接替换为你提前初始化拿到的auth实例即可：

// 原有错误写法
// var ui = new firebaseui.auth.AuthUI(firebase.auth());
// 替换为以下写法，auth就是你通过getAuth(app)拿到的实例
var ui = new firebaseui.auth.AuthUI(auth);

3. 验证启动逻辑 #

后续的登录配置、UI启动逻辑和原有用法完全一致，示例如下：

ui.start('#firebaseui-auth-container', {
  signInSuccessUrl: '/dashboard',
  signInOptions: [
    GoogleAuthProvider.PROVIDER_ID,
    // 可自行添加邮箱/手机号等其他登录方式
  ],
  // 其他自定义配置项
});

包管理项目适配（可选） #

如果你使用npm/yarn管理依赖，也可以通过包导入的方式使用：

1. 安装依赖

npm install firebaseui firebase@9

2. 导入使用

import * as firebaseui from 'firebaseui'
import 'firebaseui/dist/firebaseui.css'
// 初始化逻辑和上述一致，直接传入getAuth返回的auth实例
const ui = new firebaseui.auth.AuthUI(auth)

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