Vue3对接Firestore实时更新时方法返回Promise而非数值排查

你的代码存在两个逻辑错误，导致拿不到正确的实时数值：

1. 标记为async的函数默认返回Promise对象，你没有在getUsersCount函数顶层写返回值，调用时拿到的自然是状态为pending、最终resolve值为undefined的Promise，不可能直接拿到数值。
2. Firestore的onSnapshot是事件订阅类API，传入的回调会在每次集合数据变动时异步触发，你在回调内部写的return querySnapshot.size只会被Firestore内部逻辑接收，根本不会作为外层getUsersCount的返回值向外传递，控制台能打印值只是因为回调触发时执行了console逻辑，值没有被传到外层。

实时监听类的逻辑不能用普通函数return的方式传值，需要结合Vue3的响应式ref承接变动的数值，同时要在组件卸载时取消订阅避免内存泄漏。

1. 首先修改/src/firebase下的getUsersCount封装：

import { ref } from "vue";
import { collection, query, onSnapshot } from "firebase/firestore";
// 注意替换成你自己项目里db实例的引入路径
import { db } from "./firebase-init";

export const getUsersCount = () => {
  // 初始化响应式的用户计数，初始值设为0
  const usersCount = ref(0);
  const q = query(collection(db, "users"));
  // 启动实时监听，每次数据变动直接更新响应式变量的值
  const unSubscribe = onSnapshot(q, (querySnapshot) => {
    usersCount.value = querySnapshot.size;
  });

  // 返回响应式变量和取消订阅的方法
  return {
    usersCount,
    unSubscribe
  }
}

2. 修改组件内的setup逻辑，记得组件卸载时取消监听：

import { onUnmounted } from "vue";
import { getUsersCount } from "/src/firebase";

setup() {
  const { usersCount, unSubscribe } = getUsersCount();

  // 组件卸载时执行取消订阅，防止内存泄漏
  onUnmounted(() => {
    unSubscribe();
  })

  return {
    usersCount,
  };
},

3. 模板部分无需修改，保持原有写法即可正常渲染实时更新的用户数：

<template>
  <p>Users Count: {{ usersCount }}</p>
</template>

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