Vue3项目如何在Firebase工具类中配置Firestore实时监听？

问题根源 #

你遇到的页面不渲染消息的核心原因有两点：

1. 服务层registerMessageListener中创建的messages是普通JavaScript数组，而非Vue的响应式对象（ref/reactive），因此onSnapshot异步回调中更新数组内容时，Vue无法追踪到变化，不会触发页面渲染。
2. onSnapshot是异步执行的，初始调用registerMessageListener时返回的是空数组，后续异步添加元素后，普通数组的变更无法被Vue感知。

解决方案 #

我们通过回调函数传递更新的方式，既保持Firestore操作与组件的解耦，又能让Vue响应式系统正常工作。

1. 修改Firestore服务层代码 (src/services/firebase_firestore.js)

将监听函数改为接收回调参数，每次快照更新时通过回调把最新消息列表传递给组件：

import { addDoc, collection, getFirestore, and, or, query, where, onSnapshot, orderBy } from "firebase/firestore";

let unsubscribe = null;

const registerMessageListener = (senderId, recipientId, onMessagesUpdate) => {
    if (unsubscribe) unsubscribe();

    const messagesCollection = collection(db, "messages");

    // 新增orderBy保证消息按时间顺序展示（需确保消息文档有created_at字段）
    const q = query(
        messagesCollection,
        or(
            and(where("sender_id", "==", senderId), where("recipient_id", "==", recipientId)),
            and(where("sender_id", "==", recipientId), where("recipient_id", "==", senderId))
        ),
        orderBy("created_at")
    );

    unsubscribe = onSnapshot(q, (snapshot) => {
        const messages = [];
        snapshot.forEach(doc => {
            messages.push({
                id: doc.id,
                ...doc.data()
            });
        });
        // 调用组件传入的回调，传递最新消息列表
        onMessagesUpdate(messages);
    });

    // 返回取消订阅函数，供组件清理监听
    return () => unsubscribe();
}

export { registerMessageListener };

2. 修改组件代码 (HomePage.vue)

在组件中传入回调函数更新响应式messages，并在组件卸载时清理监听：

<script setup>
import { ref, onUnmounted } from "vue";
import { registerMessageListener } from "../services/firebase_firestore.js";

const messages = ref([]);
let unsubscribeListener = null;

const loadAllMessages = () => {
  if (!recipient) return;

  // 先清理之前的监听
  if (unsubscribeListener) unsubscribeListener();

  // 注册监听，通过回调更新响应式数据
  unsubscribeListener = registerMessageListener(sender.id, recipient.id, (newMessages) => {
    messages.value = newMessages;
    console.log("Messages updated: ", messages.value);
  });
}

// 组件卸载时取消监听，避免内存泄漏
onUnmounted(() => {
  if (unsubscribeListener) unsubscribeListener();
});
</script>

<template>
  <div>
    ...
    <div id="chat_feed" style="...">
      <div style="border: 1px solid gray; margin: 1px"
          v-for="message in messages"
          :key="message.id" <!-- 必须添加key，避免列表渲染错误 -->
      >
        <p>
          {{ message.text_message }}
        </p>
      </div>
    </div>

    <div>
      <button @click="loadAllMessages">Load All Messages</button>
    </div>
  </div>
</template>

额外优化说明 #

• 添加orderBy("created_at")：确保消息按发送时间顺序展示，需要在添加消息时用serverTimestamp()设置该字段。
• 组件卸载时取消监听：避免组件销毁后仍保持Firestore连接，造成不必要的资源消耗。
• 给v-for添加:key：这是Vue列表渲染的最佳实践，能提升渲染性能并避免DOM复用错误。

内容的提问来源于stack exchange，提问作者sweet-pineapple