React结合Firebase实现登录注册时报错.default.auth is not a function如何解决

报错的根源是firebase.js的默认导出逻辑和你实际使用的对象类型完全不匹配，不是语法笔误，也不是漏了路由配置：

• 你当前的导出代码是export default fireDb.database().ref();，这行代码返回的是 Realtime Database 的节点引用实例，根本不是初始化完成的 Firebase 应用根对象
• 你在Login.js里把这个数据库引用实例当成了可以调用.auth()的应用根对象使用，而数据库引用本身不存在auth方法，自然就抛出default.auth is not a function的类型错误。

分步修复方案 #

1. 修正firebase.js的导出逻辑 #

Firebase 兼容模式下，只有firebase.initializeApp()返回的应用根实例，才能挂载.auth()、.database()、.firestore()这些子服务方法。
删除原来把数据库引用当默认导出的代码，改成直接导出应用根实例：

// 原错误导出：把数据库ref直接当默认值导出
// export default fireDb.database().ref();

// 正确写法：导出初始化完成的应用实例
export default fireDb;
// 如果后续需要用数据库功能，单独导出引用即可，不占默认导出位
export const dbRef = fireDb.database().ref();

2. 补全必须的Firebase模块导入 #

如果你用的是import firebase from "firebase/app"的兼容版SDK写法，光引入核心app包是无法加载auth、database功能的，必须手动引入对应模块，不然就算导出改对了，auth方法依然会是undefined。
在firebase.js顶部补全导入：

import firebase from "firebase/app";
// 显式引入用到的子服务模块，SDK不会自动加载
import "firebase/auth";
import "firebase/database";

// 以下是你原有的配置和初始化逻辑，不需要改动
const firebaseConfig = {
  // 你自己的配置项原样保留
};
const fireDb = firebase.initializeApp(firebaseConfig);

3. 微调Login.js的代码逻辑 #

这部分改动量很小，两种方式都可以：

• 方式一：保留原有导入方式，因为现在默认导出的fireDb已经是正确的应用实例，原来的fireDb.auth()调用可以正常工作，不需要大改
• 方式二（更推荐）：在firebase.js里单独导出auth实例，减少重复写.auth()的冗余代码：
  在firebase.js里加一行导出：

  export const auth = fireDb.auth();
  

  然后Login.js里的导入从默认导入改成导入auth实例：

  // 原导入：import fireDb from "../firebase";
  import { auth } from "../firebase";
  

  把原来代码里所有fireDb.auth()的调用全替换成auth即可，比如登录逻辑会简化为：

  const handleLogin = () => {
    clearErrors();
    auth
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        history.push("/HomePage");
      })
      // 原有的错误捕获和提示逻辑完全保留即可
  }
  

额外的小优化 #

你当前的登录表单有个小隐患：<button type="submit">默认会触发表单提交的页面刷新逻辑，会打断auth的异步请求。建议给<form>标签加上onSubmit={(e) => e.preventDefault()}，避免页面无意义刷新。

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