React集成Firebase邮箱密码认证报错：TypeError: Object(...) is not a function

这个错误几乎可以肯定是Firebase版本不兼容导致的——现在Firebase v9+采用了全新的模块化API设计，而你的代码还在沿用v8及更早版本的命名空间导入方式，二者不匹配就会抛出这个函数调用错误。

下面给你两种解决思路，按需选择：

方案1：继续用旧写法（兼容模式） #

如果不想大改现有代码，直接改用Firebase的compat包就行，它专门用来兼容旧的命名空间写法：

修改你的Firebase.js导入部分：

// 替换原来的 import firebase from 'firebase'
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/database'; // 保留你用到的数据库模块

之后初始化和使用认证的代码可以和之前一样，比如：

firebase.initializeApp(config);

// 调用邮箱密码注册/登录
const auth = firebase.auth();
auth.createUserWithEmailAndPassword(email, password)
  .then(userCred => {
    // 处理成功逻辑
  })
  .catch(err => {
    console.error(err);
  });

方案2：迁移到v9+模块化API（推荐） #

如果想用上Firebase最新的轻量化特性（支持tree-shaking，打包体积更小），可以改成模块化写法：

首先调整导入语句：

import { initializeApp } from 'firebase/app';
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';
import { getDatabase } from 'firebase/database'; // 数据库模块按需导入

然后初始化和使用认证：

// 初始化Firebase App
const app = initializeApp(config);

// 获取Auth实例
const auth = getAuth(app);

// 调用邮箱密码注册
createUserWithEmailAndPassword(auth, email, password)
  .then(userCred => {
    // 处理逻辑
  })
  .catch(err => {
    console.error(err);
  });

关键检查点 #

最后一定要去Firebase控制台的Authentication页面，确认你已经启用了「邮箱/密码」这个登录方式——很多人会忽略这一步，导致即使代码正确也无法正常工作。

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