Estoy creando una aplicación en la que los usuarios pueden etiquetar los temas que les interesan.

Estoy buscando las mejores prácticas sobre cómo manejar el siguiente problema:

Tengo una página que monta un oyente onSnapshot durante la creación de la página (ruta de la página de ejemplo: site.com/tags/apple ). Esta página le permite al usuario agregar la etiqueta a su feed. Primero, necesito "observar" si agregan la etiqueta a su feed o verificar si ya existe para poder alternar el estado del ícono de un botón para informarles que ya agregaron esta etiqueta a su feed. .

Pensé que usaría el oyente onSnapshot para manejar esta lógica así (simplificado para esta pregunta):

 mounted() { loadwatchedTag() { const docRef = doc(db, `users/${this.userProfile.uid}/tags`, 'apple') //<-- example tag this.unsubscribe = onSnapshot(docRef, { next: (doc) => console.log('tag', doc.data()), error: (error) => console.log('watchedTag listener error', error) }) } }

El problema es que al cargar la página, aparece el siguiente error en la consola (porque la etiqueta aún no existe):

tag, undefined

Entonces, ¿cómo manejar este problema en la carga de la página si la etiqueta aún no existe? ¿Debería estar haciendo algo como esto dentro del código onSnapshot?

 if (docSnap.exists()) { console.log("tag exists!", docSnap.data()); } else { // doc.data() will be undefined in this case console.log("tag does not exist"); }