I am trying to reference a auto generated firestore document ID so that I can create a subcollection in it.

The problem is while I am able to find that document ID, I can't seem to be able to save it to a variable where its usable.

Here I'm getting a specific document for the current user. of which userDocs has that documents ID in it. (getCollection is a composable that im calling)

const { documents: userDocs } = getCollection("userData", [
      "userId",
      "==",
      user.value.uid,
    ]);

Whenever I do console.log(userDocs), I get this object that has all the document info including the document id.

screenshot

However, when I try and drill down into the object to get the ID like with userDocs.value or userDocs.id, etc it just returns undefined.

If I run a v-for in the html like this:

<div v-for="docs in userDocs" :key="docs.id">
   <h1>{{ docs.id }}</h1>
</div>

It spits out the document id on a webpage no problem.

I'm trying to inject that document ID here so I can add a subcollection in firebase to this specific users document.

const addNew = async (plant) => {
      const userPlant = {
        plant: plant,
        planted: tempPlanted,
      };
      const res = await projectFirestore
        .collection("userData")
        .doc(userDocs)  <--------HERE
        .collection("plants")
        .add(userPlant);
    };

any help would be appreciated.