如何在JavaScript应用中正确配置并使用多个Firebase项目？

此前在Stack Overflow提问该问题被标记为重复，但尝试所有推荐方案及Firebase官方文档方法均无效，现再次咨询：需将两个独立Firebase项目整合到一个管理应用中，按文档要求为其中一个配置了唯一名称，但并未生效。

现有代码 #

firebase.js #

import { initializeApp, getApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore/lite";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "admin-side.firebaseapp.com",
  projectId: "admin-side",
  storageBucket: "admin-side.appspot.com",
  messagingSenderId: "5434...",
  appId: "1:543...:web:aa001...",
};

const firebaseConfig2 = {
  apiKey: "AIzaSyB...",
  authDomain: "client-side.firebaseapp.com",
  projectId: "client-side",
  storageBucket: "client-side.appspot.com",
  messagingSenderId: "74150...",
  appId: "1:741...:web:7614...",
};

const app = getApps().length ? getApp() : initializeApp(firebaseConfig);

const app2 = getApps().length
  ? getApp()
  : initializeApp(firebaseConfig2, "secondary");

const db = getFirestore(app);
const storage = getStorage(app);

const db2 = getFirestore(app2);
const storage2 = getStorage(app2);

export { db, storage, db2, storage2 };

数据调用代码 #

import { db, db2 } from "../firebase";
import {
  collection,
  getCount,
  getDocs,
  limit,
  query,
  startAfter,
  where,
} from "firebase/firestore/lite";

export default function HomePage(){

const getData = async () => {
    const constraints = [];

    constraints.push(limit(10));

    // db对应项目有"blogPosts"集合，db2对应项目有"posts"集合
    // 用db2调用"posts"返回空数组，用db调用"blogPosts"正常返回数据
    // 用db2调用"blogPosts"时返回的是db中的数据，说明仅第一个项目被初始化

    const posts = collection(db2, "posts");
    let q = query(blogs, ...constraints);

    const qSnapshot = await getDocs(q);
    const dataQ = qSnapshot.docs.map((doc) => ({
      ...doc.data(),
      id: doc.id,
    }));

    console.log(dataQ); // 返回空数组

    setDatas(dataQ);
    setLoader(false);

  }
}

实际现象 #

• db对应项目包含blogPosts集合，db2对应项目包含posts集合
• 使用db2调用posts集合时返回空数组
• 使用db调用blogPosts集合可正常获取数据
• 使用db2调用blogPosts集合时，返回的却是db项目中的数据，说明仅第一个Firebase项目被成功初始化

问题原因及解决方案 #

1. Firebase应用实例初始化逻辑错误 #

原代码中初始化app2的逻辑存在问题：当第一个应用已经初始化后，getApps().length不为0，会直接返回第一个默认应用，而不是尝试获取名为secondary的应用。正确逻辑应该是先检查是否存在指定名称的应用，不存在再初始化。

修正后的firebase.js初始化部分：

const app = getApps().length ? getApp() : initializeApp(firebaseConfig);

// 修正app2初始化逻辑：优先获取已存在的"secondary"应用，不存在则初始化
let app2;
try {
  app2 = getApp("secondary");
} catch (error) {
  app2 = initializeApp(firebaseConfig2, "secondary");
}

2. 数据调用代码中的变量名错误 #

调用代码中定义了const posts = collection(db2, "posts");，但后续查询时使用了未定义的blogs变量，导致查询对象错误，返回空数组。需将blogs改为posts：

修正后的调用代码片段：

const posts = collection(db2, "posts");
let q = query(posts, ...constraints); // 将blogs改为posts

经过以上两处修正后，即可正常初始化两个Firebase项目，并分别获取对应项目中的数据。

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