Electron配置Firebase/Firestore遇‘firebase.firestore is not a function’错误求助

这个错误的核心原因是Firestore模块未被正确加载，下面分场景给出具体修复方案：

场景1：通过CDN引入Firebase SDK #

如果你的HTML中只引入了firebase-app.js，必须额外添加Firestore的CDN脚本：

<!-- 先引入核心Firebase App -->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<!-- 再引入Firestore模块 -->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>

版本号请和你的firebaseConfig对应的SDK版本保持一致。

场景2：通过npm/yarn安装Firebase SDK（Electron常用方式） #

方式A：使用Firebase v8及以下命名空间语法 #

确保在初始化前导入Firestore模块：

// Electron相关代码略

// 导入核心App和Firestore模块
const firebase = require('firebase/app');
require('firebase/firestore');

const fireapp = firebase.initializeApp(firebaseConfig);
// 现在可以正常调用firebase.firestore()
let firestore = firebase.firestore();

方式B：使用Firebase v9+模块化语法（推荐） #

v9+采用模块化导入，体积更小，更符合现代JS规范：

// Electron相关代码略

// 按需导入需要的Firebase方法
const { initializeApp } = require('firebase/app');
const { getFirestore, collection, addDoc, onSnapshot } = require('firebase/firestore');

const fireapp = initializeApp(firebaseConfig);
const firestore = getFirestore(fireapp);
const messagesRef = collection(firestore, 'messages');

// 提交消息的代码调整为模块化写法
messageForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const message = messageInput.value;
  if (!message || message.length < 2) { return; }
  messageInput.value = '';

  // 渲染自己发送的消息
  const sentMessage = document.createElement('p');
  sentMessage.textContent = `YOU > ${message}`;
  sentMessage.classList.add('sent-message');
  consoleBody.appendChild(sentMessage);
  consoleBody.scrollTop = consoleBody.scrollHeight;

  // 保存到Firestore
  addDoc(messagesRef, {
    sender: 'YOU',
    text: message
  });
});

// 监听消息的代码调整
onSnapshot(messagesRef, (querySnapshot) => {
  querySnapshot.docChanges().forEach((change) => {
    // 只处理新增的消息，避免重复渲染
    if (change.type === 'added') {
      const message = change.doc.data();
      // 跳过自己发送的消息，避免重复显示
      if (message.sender !== 'YOU') {
        const receivedMessage = document.createElement('p');
        receivedMessage.textContent = `${message.sender} > ${message.text}`;
        consoleBody.appendChild(receivedMessage);
        consoleBody.scrollTop = consoleBody.scrollHeight;
      }
    }
  });
});

额外优化：避免重复渲染消息 #

原代码中onSnapshot会遍历所有文档，每次有新消息时会重新渲染所有历史消息，建议改用docChanges()只处理新增的文档，同时跳过自己发送的消息，避免重复显示。

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