React项目Firebase认证报错：Uncaught TypeError: (0 , _firebase.auth) is not a function

这个报错我之前帮朋友排查过，大概率是Firebase版本的API使用方式不匹配导致的，下面分几种常见情况给你解决方案：

1. 你安装的是Firebase v9+模块化版本，但用了v8及以下的命名导入写法 #

Firebase从v9开始改成了模块化的可树摇API，不再支持直接调用auth()这种命名导出，如果你是这种情况，改写成模块化的导入方式就行：

正确的firebase.js配置（v9+） #

// firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // 你的Firebase项目配置信息
};

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

export { auth };

在组件中调用的方式 #

// 组件文件
import { auth } from './firebase';
import { signInWithEmailAndPassword } from "firebase/auth";

// 示例：调用邮箱密码登录函数
const handleLogin = async (email, password) => {
  try {
    await signInWithEmailAndPassword(auth, email, password);
    // 登录成功后的逻辑
  } catch (error) {
    console.error('登录失败:', error);
  }
};

2. 如果你想继续用v8的命名方式（不推荐，无法实现代码树摇） #

如果你习惯旧版本的写法，可以安装compat兼容包，这样就能继续用原来的auth()调用逻辑：

安装兼容包 #

# 直接安装v8版本
npm install firebase@^8.10.0
# 或者已装v9+的情况下，安装兼容模块
npm install firebase/compat

兼容版的firebase.js配置 #

// firebase.js
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

const firebaseConfig = {
  // 你的Firebase项目配置信息
};

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

export { auth };

3. 检查firebase.js的导出是否正确 #

有时候可能是导出导入的写法不匹配导致的：比如误写成export default auth但导入时用了import { auth } from './firebase'，或者反过来，这种情况也会触发找不到函数的报错，一定要确保导入导出的方式一致。

4. 确认Firebase认证服务已启用 #

虽然概率较低，但还是要去Firebase控制台的Authentication模块，确认你要使用的认证方式（比如邮箱密码、Google登录等）已经开启，未启用的话也可能引发奇怪的报错。

你可以先检查自己的Firebase版本，再对应上面的方案调整，应该就能解决这个问题了！

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