Get Subcollection docs with vuefire 3

[sebastiantheobald]

Hey there,

I just implemented vuefire 3 to get data from firebase. It works perfectly.
Addionally I have to get docs from a subcollectin. How can I achieve this?

[posva]

This still has to be achieved manually through watchers or directly. There is #153 but it still needs more investigation

[posva]

Ah, I see, I thought you wanted sub collections in a collection of items but in your case it's just one sub collection.

You can also do:

const rooms = useCollection(computed(() => collection(db, `projects/${route.params.id}/rooms`)))

If the param can change and it will automatically change if you go to a different project from the current one ✨

[sebastiantheobald]

Hey @posva , thanks for this hint!
I already tried that to get a document data this way:

const projectSource = computed(
    () => doc(collection(db, 'projects'), route.params.id)
)

The problem is, I got an error when I leave the current route back to the home page. (I use this on the project single page. This is the error and I have no idea how to fix it:

Uncaught (in promise) FirebaseError: Function doc() cannot be called with an empty path.

[davidstackio]

@sebastiantheobald Since project source is computed it may be undefined, Firebase doesn't allow undefined. So you may need to add a check in your computed function.

This is what I did for something similar:

const userDocRef = computed(() => {
  if (currentUser.value) {
    return doc(db, "users", currentUser.value.uid);
  }
});

[sebastiantheobald]

I removed vuefire from my project because it wasnt that easy it looked at first view. On my next project I will look into that. Thanks @davidstackio

[posva]

@davidstackio is correct. It's worth noting that VueFire allows nullish values specifically for this pattern:

const rooms = useCollection(
  computed(() =>
	route.params.id != null
	  ? collection(db, `projects/${route.params.id}/rooms`)
	  : null
  )
)