使用FirebaseUI匿名登录时遇Uncaught TypeError: fn(...).signInAnonymously错误

常见原因及修复步骤 #

1. FirebaseUI未配置匿名登录选项 #

检查FirebaseUI初始化代码，必须在signInOptions中添加匿名登录配置：

const uiConfig = {
  signInOptions: [
    firebase.auth.AnonymousAuthProvider.PROVIDER_ID, // 关键配置项
    // 其他登录方式（如邮箱、Google等）...
  ],
  // 其他UI配置（如登录成功跳转等）...
};

缺失该配置时，FirebaseUI不会加载匿名登录相关方法，直接触发错误。

2. Firebase控制台未启用匿名登录 #

登录Firebase控制台，进入项目 → 认证 → 登录方法，找到「匿名」登录方式，确保开关处于启用状态。未启用时，即使代码配置正确，底层Auth服务也会拒绝请求。

3. Auth实例引用错误 #

确认传入FirebaseUI的是有效的Firebase Auth实例：

// Firebase v9+模块化写法
import { getAuth } from "firebase/auth";
import * as firebaseui from 'firebaseui';

const auth = getAuth();
const ui = new firebaseui.auth.AuthUI(auth); // 必须传入正确的Auth实例

如果传入的实例无效或未正确初始化，调用signInAnonymously时会找不到方法。

4. SDK版本不兼容 #

确保Firebase Auth与FirebaseUI版本匹配：

• 使用Firebase v9+模块化SDK时，需搭配firebaseui@6.x及以上版本
• 避免混用旧版（v8及以下）和新版SDK的导入方式

5. 导入方式错误（v9+模块化） #

不要混用模块化与compat兼容模式的导入：

// 错误示例：混用两种模式
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import * as firebaseui from 'firebaseui';

// 正确示例：统一使用模块化模式
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import * as firebaseui from 'firebaseui';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

调试建议 #

• 打开浏览器控制台，检查是否有前置初始化错误（如Firebase配置错误），这类问题会导致Auth实例异常
• 初始化FirebaseUI前，打印Auth实例验证方法存在性：

console.log(auth.signInAnonymously); // 输出为function则正常，否则说明实例异常

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