En una aplicación ionic vue, quiero mostrar algunos datos de Firebase Firestore en.

En Firestore, tengo una colección de households con entries de subcolección. Un usuario puede ser miembro de un hogar y quiero mostrar todas las entradas de todos los hogares de los que es miembro.

Tengo una matriz de entries en mis data :

 data() { return { entries: [], }; },

Lleno esta matriz haciendo tres consultas anidadas contra firebase:

1. Obtener usuario actual
2. Obtener todos los hogares asociados con el usuario actual
3. Obtenga todas las entradas de todos los hogares para el usuario actual

 beforeCreate: function () { auth.onAuthStateChanged((user) => { if (user) { // Get current uid let uid = user.uid; // Loop trough all households of user let userHouseholdIds = []; db.collection("households") .where("members", "array-contains", uid) .onSnapshot((snapshotChange) => { snapshotChange.forEach((doc) => { userHouseholdIds.push(doc.id); }); userHouseholdIds.forEach((householdId) => { // Get household name db.collection("households") .doc(householdId) .get() .then((value) => { let householdId = value.id; let householdName = value.data().name; // Get household entries db.collection("households") .doc(householdId) .collection("entries") .onSnapshot((snapshotChange) => { snapshotChange.forEach((doc) => { let newDoc = doc.data(); newDoc["id"] = doc.id; newDoc["householdName"] = householdName; newDoc["householdId"] = householdId; this.entries.push(newDoc); }); }); }); }); }); } });

Aunque no estoy seguro de si este es el camino a seguir, funciona como se esperaba (hasta ahora).

Sin embargo, cuando realizo un cambio en una entrada e1 en un hogar h1 directamente en la consola de Firestore, cada entrada de h1 se duplica en la interfaz.

Supongo que necesito un this.entries = [] en algún lugar antes de que llegue una actualización de Firestore, pero no puedo averiguar dónde.

¿Estoy en el camino correcto? ¿Qué tendría que modificar para evitar la duplicación? ¡Muchas gracias!