Firebase v9的Firestore中onSnapshot在Vue项目返回undefined如何解决？

• onSnapshot 不是异步函数，不返回Promise，使用await没有任何效果，它的返回值是取消实时监听的函数，不是查询结果。
• 变量作用域冲突：回调内部重新声明了局部变量user，外层的顶层user变量从未被赋值，因此打印结果为undefined。
• 你拿到onSnapshot返回的取消函数后立刻调用了snapshot()，直接终止了监听，回调函数根本不会执行，也导致拿不到数据。
• 逻辑匹配问题：你现在查询的是整个user集合，返回的是所有用户组成的数组，如果你要获取指定uid的单个用户数据，需要直接查询对应文档，而非整个集合。

场景1：仅需要单次获取数据，不需要实时监听 #

这种场景直接用getDoc（查单个文档）或getDocs（查集合）即可，是原生支持await的异步方法：

获取单个指定uid的用户数据（符合你预期的返回格式） #

import { getDoc, doc } from "firebase/firestore";

// 此处的uid可从Firebase Auth的登录状态中获取
const uid = '当前登录用户的uid值'
const docSnap = await getDoc(doc(db, "user", uid));
const user = docSnap.exists() ? docSnap.data() : null
console.log(user) // 输出{name:'someone name', age:22}格式的结果

获取整个user集合的所有用户数组 #

import { getDocs, collection } from "firebase/firestore";

const querySnap = await getDocs(collection(db, "user"))
const userList = querySnap.docs.map(doc => doc.data())
console.log(userList)

场景2：需要实时监听数据变化，使用onSnapshot #

实时监听的业务逻辑必须放在回调函数内部处理，不能在回调外同步拿数据：

监听单个用户的实时变化 #

import { onSnapshot, doc } from "firebase/firestore";
const uid = '当前登录用户的uid值'
let user = null
// 不需要加await，onSnapshot会立刻返回取消监听的函数
const unsubscribe = onSnapshot(doc(db, "user", uid), (docSnap) => {
  user = docSnap.exists() ? docSnap.data() : null
  // 所有用到user的逻辑都要在这里处理，比如赋值给Vue的响应式变量
  console.log(user)
})

// 页面/组件卸载时调用取消监听，避免内存泄漏，Vue项目可放在onUnmounted生命周期中执行
// unsubscribe()

监听整个user集合的实时变化 #

import { onSnapshot, collection } from "firebase/firestore";

let userList = []
const unsubscribe = onSnapshot(collection(db, "user"), (snap) => {
  userList = snap.docs.map(doc => doc.data())
  console.log(userList)
})

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