Vue+Firebase聊天应用数据获取后组件无法渲染问题求助

我正在开发一款聊天应用，遇到了数据渲染的问题：

问题详情 #

我用getCollection.js从Firebase获取消息数据，代码如下：

import { ref } from "vue"
import {projectfirestore} from "./../../cons"
import { collection ,getDocs,query, orderBy} from "firebase/firestore";

const Doc = ref([])
const error = ref(null)
const getCollection = async (collectionName)=>{
    const collectionq = query(collection(projectfirestore,collectionName), orderBy("createdAt"))
    await (await getDocs(collectionq)).forEach(doc=>{
        doc.data().createdAt && Doc.value.push({...doc.data(),id:doc.id})
    })
    if (!Doc.value) {
        error.value = "could not fetch the data"
        Doc.value = null
    }
    console.log("docs.value",Doc.value)
    console.log("error].value",error.value)

    return { error, Doc }
}

export default getCollection

函数末尾的console.log显示数据已经正确获取到了。

然后在ChatWindow.vue中调用这个函数：

<template>
  <div class="chat-window">
    <div v-if="error">{{error}}</div>
    <div v-if="Doc" class="messages">
        <div v-for="doc in Doc" :key="doc.id" class="single">
            <span class="created-at">{{doc.createdAt}}</span>
            <span class="name">{{doc.name}}</span>
            <span class="message">{{doc.message}}</span>
        </div>
    </div>
  </div>
</template>

<script>
import getCollection from '../composables/getCollection.js'

export default {
    setup(){
        const {error , Doc} =  getCollection('message')
        console.log("docskk.value",Doc)
        console.log("errorkk.value",error)
        return {Doc, error}
    }
}
</script>

这里的console.log比getCollection.js里的先执行，页面上也看不到消息内容。

我已经确认ChatWindow组件正确放在了Chatroom.vue中：

<template>
  <div class="container">
    <Navbar />
    <ChatWindow />
    <NewChatRoom />
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue';
import getUser from '@/composables/getUser';
import { watch } from '@vue/runtime-core';
import { useRouter } from 'vue-router';
import NewChatRoom from '@/components/NewChatRoom.vue';
import ChatWindow from '@/components/ChatWindow.vue';

export default {
    components: { Navbar, NewChatRoom, ChatWindow },
     setup(){
      const {user } = getUser()
      const router = useRouter()
      watch(user,()=>{
        if(!user.value){
          router.push({name:"Welcome"})
        }
      })
    }
}
</script>

尝试给setup加async并await函数调用后，ChatWindow组件直接不显示了：

async setup(){
    const {error , Doc} = await getCollection('message')
    return {Doc, error}
}

希望能解决消息渲染的问题，让消息正常显示在页面上。

解决方案 #

1. 修复getCollection的变量作用域与逻辑问题 #

当前Doc和error定义在函数外部，属于全局变量，会导致多次调用时的数据污染，且错误判断逻辑无效，需调整：

import { ref } from "vue"
import {projectfirestore} from "./../../cons"
import { collection ,getDocs,query, orderBy} from "firebase/firestore";

const getCollection = async (collectionName)=>{
    // 将响应式变量移至函数内部，避免全局污染
    const Doc = ref([])
    const error = ref(null)
    try {
        const collectionq = query(collection(projectfirestore,collectionName), orderBy("createdAt"))
        const querySnapshot = await getDocs(collectionq)
        querySnapshot.forEach(doc=>{
            const data = doc.data()
            // 直接判断数据完整性，而非仅依赖createdAt
            if (data) {
                Doc.value.push({...data, id: doc.id})
            }
        })
        // 空数组时给出提示，原逻辑![]为false，无法触发错误提示
        if (Doc.value.length === 0) {
            error.value = "暂无消息数据"
        }
    } catch (err) {
        error.value = "获取数据失败：" + err.message
        Doc.value = []
    }
    console.log("docs.value",Doc.value)
    console.log("error.value",error.value)
    return { error, Doc }
}

export default getCollection

2. 解决async setup导致组件不显示的问题 #

Vue3中async setup返回Promise，必须用<Suspense>组件包裹才能正常渲染，修改Chatroom.vue：

<template>
  <div class="container">
    <Navbar />
    <Suspense>
      <template #default>
        <ChatWindow />
      </template>
      <template #fallback>
        <!-- 加载状态提示 -->
        <div>加载消息中...</div>
      </template>
    </Suspense>
    <NewChatRoom />
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue';
import getUser from '@/composables/getUser';
import { watch } from '@vue/runtime-core';
import { useRouter } from 'vue-router';
import NewChatRoom from '@/components/NewChatRoom.vue';
import ChatWindow from '@/components/ChatWindow.vue';

export default {
    components: { Navbar, NewChatRoom, ChatWindow },
     setup(){
      const {user } = getUser()
      const router = useRouter()
      watch(user,()=>{
        if(!user.value){
          router.push({name:"Welcome"})
        }
      })
    }
}
</script>

之后ChatWindow.vue的setup可以保留async写法：

async setup(){
    const {error , Doc} = await getCollection('message')
    return {Doc, error}
}

3. 模板优化与Timestamp处理 #

Firestore的createdAt是Timestamp类型，需转成可读格式；同时优化空状态判断：

<template>
  <div class="chat-window">
    <div v-if="error" class="error">{{error}}</div>
    <div v-if="Doc.length > 0" class="messages">
        <div v-for="doc in Doc" :key="doc.id" class="single">
            <!-- 将Timestamp转为日期格式 -->
            <span class="created-at">{{doc.createdAt.toDate().toLocaleString()}}</span>
            <span class="name">{{doc.name}}</span>
            <span class="message">{{doc.message}}</span>
        </div>
    </div>
    <div v-else-if="!error">暂无消息</div>
  </div>
</template>

内容的提问来源于stack exchange，提问作者Abdallah Abu sedo