How to retrieve referenced documents in Firestore?

Question

I have a React web app where I am trying to manage orders and tables.

I have a collection of tables and a collection of orders .

A table has a field of orders which is an array of referenced documents.

I want to be able to retrieve via snapshop listener, the list of orders for a table.

I currently have a function to add an item to an order which updates my orders and table collections.

const addToOrder = async () => {
    try {
      const orderRef = await addDoc(collection(db, "orders/"), menu[0]);
      const tablesRef = await updateDoc(doc(db, `tables/Pieu2dZ6GX9WpVKCU7kY`), {
        orders: arrayUnion(orderRef)
      });    
      console.log("Document written with ID: ", tablesRef);
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  }

I then try listen to these changes with the onSnapshot function:

try {
      onSnapshot(doc(db, 'tables/Pieu2dZ6GX9WpVKCU7kY'), async (doc) => {
        console.log("Current data: ", doc.data());
        
      });
    }catch(err) {
      console.log("err:", err)
    }

This only returns an array of orders which doesn't have the referenced document in it. It just returns this:

// removed some data to obfuscate config
{
    "converter": null,
    "_key": {
        "path": {
            "segments": [],
            "offset": 5,
            "len": 2
        }
    },
    "type": "document",
    "firestore": {
        "app": {
            "_isDeleted": false,
            "_options": {
            },
            "_config": {
                "name": "[DEFAULT]",
                "automaticDataCollectionEnabled": false
            },
            "_name": "[DEFAULT]",
            "_automaticDataCollectionEnabled": false,
            "_container": {
                "name": "[DEFAULT]",
                "providers": {}
            }
        },
        "databaseId": {
            "projectId": "oats-e82ae",
            "database": "(default)"
        },
        "settings": {
            "host": "firestore.googleapis.com",
            "ssl": true,
            "ignoreUndefinedProperties": false,
            "cacheSizeBytes": 41943040,
            "experimentalForceLongPolling": false,
            "experimentalAutoDetectLongPolling": false,
            "useFetchStreams": true
        }
    }
}

Do I have my collections setup correctly? Should I be using one collection for tables and another orders that then reference each other?

If so, how should I be retrieving related docs on

Screenshot of console log:

Answer 1

Your code is effectively pushing DocumentReference objects into an array field of another document. It is not storing the contents of the order doc inside the tables dock just a reference. When you read the tables document back, you're going to see a list of DocumentReference objects in that same field. These DocumentReference objects are just like any other DocumentReference that you might create programmatically, so you can simplygetDoc() on each one if you want its contents.