React结合Firebase开发聊天室遇app/no-app未初始化报错求解

各报错的根本原因 #

• 从react中导入auth、firestore触发报错：React本身不内置Firebase相关能力，这些服务实例需要从Firebase SDK中获取，react包中不存在对应模块，自然触发导入报错。
• 直接调用firebase.auth()、firebase.firestore()触发auth not defined、firestore not defined未定义报错：全局引入的firebase核心包默认不挂载auth、firestore的API，必须单独引入对应的功能模块包，SDK才会将对应实例挂载到全局对象上。
• 触发No Firebase App '[DEFAULT]' has been created报错：没有先调用initializeApp方法，用项目配置完成默认应用实例初始化，SDK找不到已初始化的应用上下文，所有依赖应用上下文的API调用都会失败。
• 现有代码逻辑存在的额外问题：
  • 写const auth = firestore.auth()属于逻辑错配，firestore是云数据库服务，本身不存在auth方法。
  • 提前初始化的auth、firestore本身就是服务实例，代码中后续又写auth()、firestore()相当于把已经是对象的实例当函数重复调用，会触发类型错误。

修正后的可运行实现 #

按照v8版本firebase SDK（全局导入写法）的正确接入流程：

1. 确认本地已安装依赖：firebase核心包、firebase/auth、firebase/firestore
2. 先完成默认应用初始化，再获取服务实例
3. 调用API时直接使用已初始化的实例，不重复做函数调用
   修正后的完整代码如下：

// 按模块引入依赖
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

// 替换为自身Firebase项目的配置对象
const firebaseConfig = {
  apiKey: "替换为你的项目apiKey",
  authDomain: "替换为你的项目authDomain",
  projectId: "替换为你的项目projectId",
  storageBucket: "替换为你的项目storageBucket",
  messagingSenderId: "替换为你的项目messagingSenderId",
  appId: "替换为你的项目appId"
};

// 必须优先执行应用初始化，解决默认应用不存在的报错
firebase.initializeApp(firebaseConfig);

// 初始化完成后直接获取服务实例
const auth = firebase.auth();
const firestore = firebase.firestore();

// 导出实例方便全局调用
export const db = firestore;

export const signup = (user) => {
  return async (dispatch) => {
    auth
      .createUserWithEmailAndPassword(user.email, user.password)
      .then((userCredential) => {
        console.log("注册成功：", userCredential.user);
        // 后续可直接通过db写入用户数据到数据库集合
        // return db.collection("users").doc(userCredential.user.uid).set({
        //   email: user.email,
        //   createTime: new Date()
        // })
      })
      .catch((error) => {
        console.log("注册失败：", error.code, error.message);
      })
  }
}

版本适配提示 #

如果本地安装的是Firebase v9及以上版本，全局导入的写法会失效，需要替换为模块化导入语法：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// 同样需要先完成应用初始化
const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth(firebaseApp);
const db = getFirestore(firebaseApp);

排查注意点 #

• 所有auth、firestore API的调用，必须放在initializeApp执行完成之后，否则必然触发默认应用不存在的报错。
• 严禁从react包导入Firebase相关模块，所有Firebase实例、方法均来自Firebase SDK本身。
• 初始化完成的auth、firestore是服务对象，不是可执行函数，调用时不要额外加括号执行。

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