Vue+Firestore场景：如何提取单个文档字段并写入新文档？

你的代码里主要有两个问题导致无法正确获取Username：

1. ref对象访问错误：PSubscribed是Vue的ref响应式对象，必须通过.value访问内部数据，你直接写PSubscribed.Username根本拿不到值。
2. 异步加载时机问题：load2()是异步函数，你在调用它之后立刻尝试取Username，这时候Firestore的请求还没完成，PSubscribed.value还是null，自然拿不到Username。

修正后的聊天页面组件代码 #

<script>
import { projectFirestore } from '../Firebase/Config'
import { firebaseAuth } from "../Firebase/firebase";
import getChat from "../Composables/getChat";
import { ref } from 'vue'
import { timestamp } from '../Firebase/Config'
import getPSubscribed from '../Composables/getPremium'
export default {
  setup(){
    const { PSubscribed, error: profileError, load2 } = getPSubscribed(firebaseAuth.currentUser.uid);
    const { Chat, error: chatError, load } = getChat();
    const message = ref('')
    const Activate = ref(false)
    const Loading = ref(false) // 补上原代码未声明的Loading变量

    // 异步初始化，确保先加载用户信息再加载聊天记录
    const init = async () => {
      await load2()
      await load()
    }
    init()

    const handleSubmit = async () => {
      // 校验用户信息是否加载完成
      if(!PSubscribed.value) {
        console.error('用户信息未加载完成')
        return
      }
      Loading.value = true
      try {
        const NewChat = {
          name: PSubscribed.value.Username, // 正确访问ref内部的Username字段
          message: message.value,
          createdAt: timestamp(),
        }
        await projectFirestore.collection('Subscribed').doc(firebaseAuth.currentUser.uid).collection('messages').add(NewChat)
        message.value = '' // 发送后清空输入框
      } catch(err) {
        console.error('发送消息失败:', err)
      } finally {
        Loading.value = false
      }
    }

    return { handleSubmit, Activate, message, Chat, Loading, PSubscribed, profileError, chatError }
  }
}
</script>

<template>
  <div class="chat-window">
    <div class="grid grid-cols-1 justify-items-center gap-y-2">
      <div v-for="doc in Chat" :key="doc.id" class="rounded-xl bg-red-100 w-max md:w-1/3 lg:w-1/3 xl:w-1/5 2xl:w-1/5">
        <p class="font-bold">{{ doc.name }}</p><br>
        <p class="text-left mx-4">{{ doc.message }}</p>
        <p class="created-at">{{ doc.createdAt.toDate() }}</p>
      </div><br><br>
    </div>
    <form @submit.prevent="handleSubmit">
      <textarea 
        class="w-max md:w-2/3 lg:w-2/3 xl:w-2/5 2xl:w-3/5 p-10 rounded-xl outline-none"
        placeholder="Type a message and hit enter to send..." 
        v-model="message"
        :disabled="!PSubscribed.value" // 用户信息未加载时禁用输入
      ></textarea><br>
      <button 
        class="bg-neutral-800 hover:bg-neutral-900 active:bg-neutral-800 text-red-700 hover:text-neutral-400 hover:scale-105 text-xl w-64 p-4 rounded-xl shadow cursor-pointer inline-block m-10 transition ease-in-out duration-300 drop-shadow-2xl"
        :disabled="!PSubscribed.value || Loading"
      >{{ Loading ? "Sending..." : "Send" }}</button>
      <div v-if="profileError" class="error">{{ profileError }}</div>
      <div v-if="chatError" class="error">{{ chatError }}</div>
    </form>
  </div>
</template>

关键修改点说明 #

• 正确访问ref对象：将PSubscribed.Username改为PSubscribed.value.Username，通过.value获取ref内部的响应式数据。
• 异步加载顺序：新增init异步函数，确保用户信息加载完成后再加载聊天记录，避免提交时数据未就绪。
• 提交校验与状态管理：在handleSubmit中先检查用户信息是否加载完成，同时完善Loading状态的生命周期，防止重复提交。
• 用户体验优化：用户信息未加载时禁用输入框和发送按钮，避免无效操作。

额外建议 #

• 可以在模板中添加加载状态提示，比如用v-if="!PSubscribed.value"显示加载动画，提升用户感知。
• 区分用户信息和聊天记录的错误提示，方便快速定位问题。

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