How to get ONLY list of documents in Firebase/Firestore using reactJS

Question

i want to ask something, i need to fetch data from firebase, BUT only the list of the documents

Like This

i've already tried, and i'm stuck (at the moment), here's my code:

this.ref3 = firebase
      .firestore()
      .collection("pendatang")
      .orderBy("timestamp", "desc")
      .limit(10);

componentDidMount = async () => {
    this.unsubscribe = this.ref3.onSnapshot(this.onCollectionUpdate2);
  };

onCollectionUpdate2 = (querySnapshot) => {
    const tanggal = [];
    querySnapshot.forEach((doc) => {
      tanggal.push({
        tanggal: doc.id,
        doc, // DocumentSnapshot
      });
    });
    this.setState(
      {
        tanggal,
      },
      () => {
        console.log(this.state.tanggal);
      }
    );
  };

Actually i didn't get error, i got the array but it's like didn't get any, when i use map , it didn't appear anything inside the state, this is what i got after the fetch The Image

i tried map it:

{this.state.tanggal.map((item, key) => (
                        <Chip
                          avatar={<Avatar>M</Avatar>}
                          label={item.tanggal}
                          onClick={() => this.ChipsClicked(24)}
                        />
                      ))}

and what i got:

Nothing

I really need help guys:( and I'm actually very curious about firebase, I really appreciate everyone who wants to help me:)

Answer 1

As shown in your Firebase console screenshot, the document is displayed with an italic font in the Firebase console: this is because this document is only present (in the console) as "container" of one or more sub-collection but it is not a "genuine" document.

If you create a subDoc1 document directly under a col1 collection with the full path doc1/subCol1/subDoc1 , no intermediate documents will be created (ie no doc1 document).

The Firebase console shows this kind of "container" (or "placeholder") in italic in order to "materialize" the hierarchy and allow you to navigate to the subDoc1 document but doc1 document doesn't exist in the Firestore database .

---

So if we have a doc1 document under the col1 collection

col1/doc1/

and another one subDoc1 under the subCol1 (sub-)collection

col1/doc1/subCol1/subDoc1

... actually, from a technical perspective, they are not at all relating to each other. They just share a part of their paths but nothing else.

You can very well create subDoc1 without creating doc1 .

Another side effect of this is that if you delete a document, its sub-collection(s) still exist. Again, the subcollection docs are not really linked to the parent document.

---

So, in your case, if you need to have genuine docs in the pendatang collection, you need to create them at the same time you create the first subcollection doc.

Also, note that Cloud Firestore has shallow reads: querying for documents in a collection doesn't pull in data from subcollections.