vue.js - Vue's composition API ref contains data returns null when .value is called

Question

I have a composable that fetches and returns ref documents in real-time from Firestore. The ref contains data but when I call .value in the setup(), null is returned.

The composable is as follows.

import { watchEffect, ref } from "vue";
import { projectFirestore } from "../firebase/config";

const getDocument = (collection, id) => {
  let document = ref(null);
  let error = ref(null);

  let documentRef = projectFirestore.collection(collection).doc(id);

  const unsub = documentRef.onSnapshot(
    doc => {
      if (doc.data()) {
        document.value = { ...doc.data(), id: doc.id };
        error.value = null;
      } else {
        error.value = "That document does not exist.";
      }
    },
    err => {
      console.log(err.message);
      error.value = "Problem fetching the document.";
    }
  );

  watchEffect(onInvalidate => {
    onInvalidate(() => unsub());
  });
  return { error, document };
};

export default getDocument;

When I dump the result of this, console.log(result), I get the output in the capture below but result.value is null.

How can I get the values within setup()?

Please note that the capture is a result of console.log(result) & console.log(result.value).

question from:https://stackoverflow.com/questions/65644786/vues-composition-api-ref-contains-data-returns-null-when-value-is-called

Answer 1

Waitting for answers