Trying to list a collection of Firestore databases

Question

I want to list a Firestore database collection inside an Ionic4 application, so I'm using the document from the listCollection section, so I've applied the sample code in my code:

this.afs.firestore.listCollections().then(collections => {
  for (let collection of collections) {
    console.log(`Found collection with id: ${collection.id}`);
  }
});

This is my constructor:

constructor(private router: Router,
              private afs: AngularFirestore,
              private fireauth: AngularFireAuth) { }

I get this error: error TS2339: Property 'listCollections' does not exist on type 'Firestore'.

I cannot use the attribute listCollections because it is in the online documentation...

Answer 1

In fact, as documented in the Firestore JS SDK documentation , the collection list cannot be retrieved using the mobile/web client libraries.

This applies not only to the root collection of the Firestore database, but also to subcollections of Firestore documents.

However, as you mentioned in your question, it is possible to use the Cloud Firestore Node.js client API. Therefore, you can use a Cloud Function to list a collection of Firestore databases and call this cloud function from the frontend.

Since you will be calling this cloud function from your app, we use callable cloud function .

Cloud function code

const functions = require('firebase-functions');
const admin = require('firebase-admin');

admin.initializeApp();

exports.getCollections = functions.https.onCall(async (data, context) => {

    const collections = await admin.firestore().listCollections();
    const collectionIds = collections.map(col => col.id);

    return { collections: collectionIds };

});

Front-end code

To call this callable cloud function from your Angular application, just follow the Angularfire Cloud Functions documentation.

import { Component } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/functions';

@Component({
  selector: 'app-root',
  template: `{ data$  | async }`
})
export class AppComponent {
  constructor(private fns: AngularFireFunctions) { 
    const callable = fns.httpsCallable('getCollections');
    this.data$ = callable({ .... });
  }
}

---

Note that this method is inspired by the following article on how to list all subcollections of a Cloud Firestore document using the JS SDK. (Disclaimer: I am the author)