How do I get just one singular field out of a Firestore document and add it to a new document?

Question

I am trying to make a chat where at the top of each message it displays the user's name on the top of each document they add when they send each message but I am unable to get the single field without the rest of the document.

<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, load2 } = getPSubscribed(firebaseAuth.currentUser.uid);
    load2()
      const { Chat, error, load } = getChat();
      load();
    const name = PSubscribed.Username
    const message = ref('')
    const Activate = ref(false)
    const handleSubmit = async () => {  
    const NewChat = {
        name: name.value,
        message: message.value,
        createdAt: timestamp(),
    }
    const res = await projectFirestore.collection('Subscribed').doc(firebaseAuth.currentUser.uid).collection('messages').add(NewChat)
  }
  return { handleSubmit, Activate, message, Chat, load, load2, PSubscribed, name }
}
}
    </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:w1/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"
      ></textarea><br>
      <button @click="Loading = true" 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"
      >{{ Loading ? "Sending..." : "Send" }}</button>
      <div v-if="error" class="error">{{ error }}</div>
    </form>
        </div>

    </template>

Above is the page where I want to display the messages and below is where I get PSubscribed from and the document which belongs to this user.

import { projectFirestore } from "../Firebase/Config";
import { ref } from "vue"

const getPSubscribed = (id) => {
    const PSubscribed = ref(null)
    const error = ref(null)

    const load2 = async () => {
        try{
            let res = await projectFirestore.collection('Subscribed').doc(id).get()

            if(!res.exists) {
                throw Error('That Profile no longer exists')
            }

            PSubscribed.value = {...res.data(), id: res.id}
              // console.log(PSubscribed.value)
            
        }
        catch (err){
            error.value = err.message
            console.log(error.value)
        }
    }

    return { PSubscribed, error, load2}
}

export default getPSubscribed

Does anyone know how to get PSubscribed's Username field and add it under name value?

Answer 1

How do I get just one singular field out of a Firestore document?

There is no way you can read only one field from a document using the client SDKs. It is the entire document or nothing. There are however two ways in which you can solve this problem. You can duplicate the documents, meaning that you'll have a document with all fields and another one that contains only a single field. Alternatively, you can use the Firestore Node.js client or Firebase Admin SDK, then you can use select() to select only the fields you need.