useDocument().value is always undefined

[mateo-m]

Reproduction

Logging the reference and then logging the reference's value shows the issue.

Steps to reproduce the bug

1. Using Firestore, create a collection called rooms.
2. Create a room document inside the rooms collection with any kind of data, don't leave the room document empty.
3. Pass the room's ID to the following function :

export const getRoomDocRef = (roomId: Room["id"]) => {
  const db = useFirestore();
  const roomDoc = computed(() => doc(db, "rooms", roomId));

  const roomDocRef = useDocument<Room>(roomDoc);

  console.log("Room", roomDocRef);
  console.log("Room value", roomDocRef.value);

  return roomDocRef;
};

Expected behavior

roomDocRef.value shouldn't be undefined.

Actual behavior

Here's the result in my browser's console :

I don't understand how _value (seen in the first log) can hold the correct values, while the second log (roomDocRef.value) returns undefined.

Additional information

I'm new to Vue, so I might be missing something there...

[mateo-m]

It seems like someone already had this "issue" (I don't know for sure that it's a bug) in the past : #1268

[posva]

The problem here is that composables are not being used correctly. I recommend you to give these a read:

• https://vuejs.org/guide/essentials/reactivity-fundamentals.html
• https://vuejs.org/guide/reusability/composables.html#composables

In your code, if you only want to get the data once, you can use firebase directly with getDoc(). Otherwise the code you are writing should be within a script setup (like other reactivity api):

<script setup lang="ts">
  const db = useFirestore();
  const roomDoc = computed(() => doc(db, "rooms", roomId));

  const roomDocRef = useDocument<Room>(roomDoc);
  // or const { data: roomDocRef, pending, error } = ...
</script>

You have more examples in docs.

Note that the value of the data is initially undefined while it's being retrieved but it will update as soon as it arrives. Following the TS typings should also help you see the possible values.

[mateo-m]

Alright my bad, I was trying to create a generic function to retrieve a reactive value of my document's reference which could be used in any component, but as you said, this cannot work.