Leer colecciones y documentos

Ahora que entendemos la estructura y modelo de datos de Cloud Firestore, leer documentos es sencillo.
Comencemos por leer un único documento del cual conocemos su ID. Para ello usaremos el método doc() para acceder al mismo en la colección y get() para obtener su información.

const document = await db
      .collection("users")
      .doc("juanwmedia")
      .get(); // Retorna una Promise

Como ves get() retorna una promesa, por lo que podemos usar then() o, mejor aún, async/await para resolverla y mostrar el contenido. También resulta útil acceder a la propiedad id del documento, el cual siempre retorna su ID única.

console.log(document.data()); // Desenvuelve el documento
console.log(document.id); // Muestra la ID del documento

Importante que veamos en su prototipo la existencia de la propiedad exists con valor true, que indica que el documento existe en la colección. Si pidiésemos uno que no existe, su valor sería false.
Para recuperar los datos del documento debemos utilizar el método data(), el cual nos devuelve su contenido.
Por supuesto, también podemos leer todos los documentos de una colección. Por ejemplo nuestra colección users. Para ello usamos el método get() directamente sobre una referencia a la colección, lo cual retorna un snapshot o captura de la misma.

const collection = await db.collection("users").get();

Una vez más, si examinamos lo retornado vemos que existe una propiedad docs con los documentos de la colección y otra llamada empty, que indica que no está vacía. No estamos lidiando con una matriz, pero en su prototipo vemos que tenemos acceso a forEach(), por lo que podemos iterar sobre los documentos y llamar al método data() (como antes) para desenvolverlos.

...
collection.forEach(doc => console.log(doc.id, doc.data()));

La misma mecánica podemos usar para consultar documentos que viven en subcolecciones. Por ejemplo vamos a añadir una subcolección con su documento para luego consultarlo. Recuerda que el patrón siempre debe ser collectionID/documentID/collectionID/documentID.

const subDocument = await db
      .collection("users")
      .doc("juanwmedia")
      .collection("meta")
      .doc("books")
      .get();

Si te resulta tedioso tener que escribir tanto collection() y doc(), puedes usar una versión simplificada definiendo como valor de doc() toda la ruta necesaria.

const subDocument = await db.doc("users/juanwmedia/meta/books").get();

Descarga la chuleta de Vue 3