Using useCollection on a collection with the users ID

[3DJakob]

Hey, great component very useful! I cannot find a nice way to add your hook on a collection identified with the user's ID, however. The problem is that the user's ID is not known until after the first render. How would you write that code?

Example hook

const [firebaseCartItems, loading, error] = useCollection(collection(getFirestore(app), 'users', auth.currentUser?.uid, 'cart'))

One solution could be wrapping your whole app in a component that waits for the auth.currentUser.uid and then renders the app and passes the id I guess.

[DanielBailey-web]

Although undefined does not work as a value for useCollection; null does. So you can use a tertiary as the input of your hook. I would recommend memoizing this value so that you do not have to worry about any extra renders at a very high level of your app.

const uid = auth.currentUser?.uid
const usersCart = useMemo(()=> uid ?  collection(getFirestore(app), 'users', uid, 'cart') : null, [uid])
const [firebaseCartItems, loading, error] = useCollection(usersCart);

Also, if you are initializing your app, you need to pass app to getFirestore.

[3DJakob]

Thank you I'll do it like that 👍