Estoy usando Vue 3 para crear un componente de Firebase que se suscriba a una onSnapshot() .

Y estoy tratando de darme de baja de esa transmisión llamando a la función unsubscribe() devuelta dentro watchEffect y onInvalidate . Aquí están los documentos de Vue que explican esas funciones particulares .

Usando un console.log() puedo confirmar que mi watchEffect se está disparando.

Pero no puedo activar mi segundo console.log() que existe dentro de onInvalidate y, por lo tanto, no estoy seguro de si alguna vez se llama a la función unsubscribe() .

En el código siguiente, ¿por qué no aparece my console.log("unsubscribe fired"); alguna vez fuego?

¿De qué otra forma puedo estar seguro de haber cancelado la suscripción a la transmisión de Firestore? ¿Hay un registro de esto dentro del panel de control de Firebase o algo similar?

Aquí está el componible de Vue Firestore (está escrito en TypeScript):

 import { ref, reactive, watchEffect } from "vue"; import { projectFirestore } from "@/firebase/config"; import { query, orderBy, onSnapshot, DocumentData, collection, } from "firebase/firestore"; const useCollection: any = (col: any) => { const documents = reactive<Record<string, unknown>[]>([]); const error = ref<string | null>(null); // references const collectionReference = collection(projectFirestore, col); const collectionOrdered = query( collectionReference, orderBy("createdAt", "desc") ); // updates const unsubscribe = onSnapshot( collectionOrdered, (snapshot) => { snapshot.docs.forEach((doc: DocumentData) => { documents.push({ ...doc.data(), id: doc.id }); }); error.value = null; console.log(documents); }, (err) => { console.log(err.message); documents.splice(0); error.value = err.message; } ); watchEffect((onInvalidate) => { console.log("watchEffect fired"); //This fires onInvalidate(() => { unsubscribe(); console.log("unsubscribe fired"); //This does not fire }); }); return { documents, error }; }; export default useCollection;