Vuefire查询异常：messages.value为空但messages对象含预期值

问题分析 #

这不是Vuefire的Bug，核心原因是Firestore查询是异步操作，useCollection返回的是Vue响应式ref对象。当你立即执行console.log(messages.value)时，数据还未完成加载，所以输出空数组；而直接打印messages对象时，浏览器会在数据加载完成后动态更新对象的显示内容，因此能看到预期的value值。

解决方案 #

1. 使用watch监听数据变化 #

通过Vue的watch监听messages的变化，待数据加载完成后再处理：

import { watch } from 'vue'
import { collection, limit, query } from "firebase/firestore"
import { useFirestore, useCollection } from "vuefire"

const db = useFirestore()
const messagesRef = collection(db, 'rooms/1/messages')
const messages = useCollection(query(messagesRef, limit(3)))

watch(messages, (newValue) => {
  console.log(newValue) // 此时能获取到加载完成的数组
}, { immediate: true })

2. 在模板中直接使用 #

Vue模板会自动追踪响应式数据变化，直接引用messages.value即可自动渲染加载后的内容：

<template>
  <div v-for="msg in messages.value" :key="msg.id">
    {{ msg.content }}
  </div>
</template>

3. 利用加载状态判断（可选） #

开启useCollection的状态追踪配置，通过pending字段判断加载状态：

const messages = useCollection(query(messagesRef, limit(3)), {
  wait: false // 开启状态追踪
})

// 加载中为true，完成后为false
console.log(messages.pending)

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