77

I'm trying to retrieve my documents with id but can't figure it out.
Currently I retrieve my documents like this :

const racesCollection: AngularFirestoreCollection<Races> = this.afs.collection('races');
return racesCollection.valueChanges();

I do get my documents list perfectly, however there is no doc id with them.

How can I retrieve it for each document ?

3

11 Answers 11

70

For angular 8 and Firebase 6 you can use the option id field

      getAllDocs() {
           const ref = this.db.collection('items');
           return ref.valueChanges({idField: 'customIdName'});
      }

this adds the Id of the document on the object with a specified key (customIdName)

2
  • 7
    Note: This works on a collection reference, but not a document reference...
    – Jonathan
    Commented Apr 25, 2020 at 20:53
  • simple and nice Commented Jun 11, 2021 at 22:32
52

To obtain the id of the documents in a collection, you must use snapshotChanges()

    this.shirtCollection = afs.collection<Shirt>('shirts');
    // .snapshotChanges() returns a DocumentChangeAction[], which contains
    // a lot of information about "what happened" with each change. If you want to
    // get the data and the id use the map operator.
    this.shirts = this.shirtCollection.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Shirt;
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });

Documentation https://github.com/angular/angularfire2/blob/7eb3e51022c7381dfc94ffb9e12555065f060639/docs/firestore/collections.md#example

5
  • I've been trying for a while to get my code to compile. My question is this.shirts is an Observable<ShirtId[]>. The example returns '{id, ...data}', which is not an object of type ShirtId. How is it being converted to a ShirtId type, it is just an object.
    – flobacca
    Commented May 11, 2018 at 17:08
  • Hey thanks for your answer, I was having the same problem. I just have one more question, do documents data are fetched as well? I mean performance wise if I just want the ids without fetching the document data, should I use this solution?
    – Lambasoft
    Commented Feb 10, 2019 at 11:58
  • @Lambasoft yes with const data = a.payload.doc.data () as Shirt; the object is being recovered Commented Feb 11, 2019 at 13:21
  • @LuisRuizFigueroa Thanks for your reply! So if I don't call doc.data() the object wont be recovered and I can use it's id normall
    – Lambasoft
    Commented Feb 11, 2019 at 13:48
  • 3
    With newer RXJS, you'll need to write snapshotChanges().pipe(map(actions => ... Hope that helps everyone looking at this post from the future :) Commented May 27, 2019 at 22:57
45

I've finally found the solution. Victor was close with the doc data.

const racesCollection: AngularFirestoreCollection<Race>;
return racesCollection.snapshotChanges().map(actions => {       
  return actions.map(a => {
    const data = a.payload.doc.data() as Race;
    data.id = a.payload.doc.id;
    return data;
  });
});

ValueChanges() doesn't include metadata, therefor we must use SnapshotChanges() when we require the document id and then map it properly as stated here https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md

2
  • As I understand your question, do you want to get the id after saving? or do you want to get the id of each document in the collection? Commented Nov 13, 2017 at 21:04
  • Works. Changed it to the following to clean it up a bit ``` this.items = db.collection('games').snapshotChanges().pipe( map(actions => actions.map(a => { return { gameId: a.payload.doc.id, ...a.payload.doc.data() }; })) ); ```
    – cgatian
    Commented Jan 4, 2019 at 2:01
38

For angular6+

    this.shirtCollection = afs.collection<Shirt>('shirts');
    this.shirts = this.shirtCollection.snapshotChanges().pipe(
        map(actions => {
        return actions.map(a => {
            const data = a.payload.doc.data() as Shirt;
            const id = a.payload.doc.id;
            return { id, ...data };
        });
        })
    );
25

doc.id gets the UID.

Combine with the rest of the data for one object like so:

Object.assign({ uid: doc.id }, doc.data())

2
  • This! And it's documented for DocumentSnaphot interface (in a collection it really is QueryDocumentSnaphot that extends DocumentSnaphot) Commented Mar 13, 2019 at 12:49
  • This seems like an interesting approach, however, the link doesn't offer any use example, and this answer is, let's not self-sustaining enough
    – KhoPhi
    Commented Mar 24, 2019 at 19:28
20

Since you are using angularFire, it doesn't make any sense if you are going back to default firebase methods for your implementation. AngularFire itself has the proper mechanisms implemented. Just have to use it.

valueChanges() method of angularFire provides an overload for getting the ID of each document of the collection by simply adding a object as a parameter to the method.

valueChanges({ idField: 'id' })

Here 'idField' must be same as it is. 'id' can be anything that you want your document IDs to be called.

Then the each document object on the returned array will look like this.

{
  field1 = <field1 value>,
  field2 = <field2 value>,
  ..
  id = 'whatEverTheDocumentIdWas'
}

Then you can easily get the document ID by referencing to the field that you named.

AngularFire 5.2.0

0
3

Can get ID before add documents in database:

var idBefore =  this.afs.createId();
console.log(idBefore);
2
  • Will this method ensure a unique ID and prevent ID collision ? Commented Apr 18, 2018 at 6:00
  • 1
    Exactly. @Pini Cheyni Commented Apr 18, 2018 at 13:10
3

For document references, not collections, you need:

// when you know the 'id'

this.afs.doc(`items/${id}`)
  .snapshotChanges().pipe(
    map((doc: any) => {
      const data = doc.payload.data();
      const id = doc.payload.id;
      return { id, ...data };
    });

as .valueChanges({ idField: 'id'}); will not work here. I assume it was not implemented since generally you search for a document by the id...

1
  • I can get all the data and id, but that spread thing does not work. Is it because i have arrays in my (doc data) object?
    – O-9
    Commented Aug 13, 2020 at 15:39
0

I have tried this

return this.db.collection('items').snapshotChanges().pipe(
          map(actions => {       
            return actions.map(a => {
              const data = a.payload.doc.data() as Item;
              data.id = a.payload.doc.id;
              data.$key = a.payload.doc.id;
              return data;
            });
          })
        );
0

Sadly, in React Native environment, I couldn't find a way to import doc, to get the id. I'm working with https://rnfirebase.io/firestore/usage. It can be the same case for some less common environments relying on Firebase plugin/libraries.

In that case console.log(documentSnapshot.ref); will return you what you can find below.

enter image description here

as you could see, while working with the raw response, it can be accessed via documentSnapshot.ref._documentPath._parts[1]. documentSnapshot is of course part of querySnapshot.

0

Here are my implementations with Angular 17 and Firestore modular API.

function getAllDestinations() {
    return defer(() =>
      from(getDocs(query(collection(getFirestore(), 'countries'))))
    );
  }

function fetchDestinations(
    fetchMethod: () => Observable<QuerySnapshot<DocumentData, DocumentData>>
  ): Observable<Destination[]> {
    return fetchMethod().pipe(
      switchMap((documents) => {
        const data = documents.docs.map((doc) => {
          return { ...doc.data(), id: doc.id }; // <-- include the document id
        }) as Destination[];
        // ... other details
      })
    );
  }

// usage
fetchDestinations(() => getAllDestinations()).pipe(
  tap(data: Destination) => {/* deal with data */}
).subscribe()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.