Why are non auto-generated document Ids are in italics in Firestore console?

Question

When i add a document with my own document Id (not auto generated), document Id node is in italics as shown in the screenshot from Firestore console. What is the reason behind this?

My code to add data is

const billingRef = db
      .collection('billing/test/2017/months/11')
      .doc();

  billingRef
      .set({ name: 'ABC' })
      .then(_ => {
        console.log('saved');
      })
      .catch(err => {
        console.log(err);
      });

Above code adds a node successfully, but adds node "test" and "months" in italics.

screenshot 1

screenshot 2 screenshot 3

My query yields zero results for such records in firestore, following code. How can I query all the nodes under billing?

db.collection("billing").get().then(function(querySnapshot) {
    console.log(querySnapshot.size) // this is always 0
    querySnapshot.forEach(function(doc) {
        console.log(doc.id, " => ", doc.data());
    });
});

Answer 1

Following up on my comment above you will see in the Firestore console that for Documents in italic there is a small text saying "This document does not exist, it will not appear in queries or snapshots", for non-italic it says "This document has no data", so the intuition is that when the Document is created in code without any Fields then it is "null" (a subcollection does not count). If a Field is added and removed, then the Document is simply empty and not null.

Since your query for the Documents under billing are in italic ("null" or does not exist), as the text above states, they will not appear in queries.

The solution would be to either add the document through the Firestore console because here Documents are created as empty, or if in code, add a Field and maybe remove it again if not needed, then the Documents will appear in queries.

Answer 2

The problem, I later came to find from this Question's answer for me was creating a sub collection to an empty document. This was my code that was bringing up grayed out documents.

       db.collection('temporal')
            .doc('documentexample')
            .collection("files")
            .add({
              name: "Lorem"
            })
            .catch((error) => {
              console.error("Error adding file: ", error);
            });

In the above code the doc documentexample had no field in it. So the code goes ahead and creates documentexample (it has no fields) then creates a subCollection in it files. This according to firebase just grays out the first document documentexample.

The workaround to this is first create the document add a field in it then create a subcollection to it and on and on... For my use-case, I created a function that creates the document and adds a field to it when the user signs up for the first time