How to have embedded requests in a firestore query within react

Question

In a firebase database, I've a collection of households. For each household, I've a sub-collection "invites". Not an "map" of object, but a real sub-collection.

In one page, I'm trying to retrieve each household, and I need to have each invite included in my household.

Then on my page, I will two embedded map to display each household and their related invites.

For now, the closest way I came up with was to make a "useEffect":

  const [user] = useAuthState(auth);
  const householdsRef = collection(db, "households");
  const queryRef = query(
    householdsRef,
    where("participantsIds", "array-contains", user!.uid)
  );

  const collectionRef = queryRef.withConverter(householdConverter);
  const [households, householdLoading, householdError, householdSnapshot] =
    useCollectionData<Household>(collectionRef);
  const [householdWithInvites, setHouseholdWithInvites] = useState<Household>();
  useEffect(() => {
    if (households) {
      const newHouseholds = households.map((household) => {
        const invitesRef = collection(
          db,
          "households",
          household.id,
          "invites"
        );
        const [invites] = useCollection(invitesRef);
        const inviteData = invites?.docs.map((d) => d.data as any) as string[];
        return { ...household, invites: inviteData } as Household;
      });
      console.log(newHouseholds);
    }
  }, households);

But I get this error:

react-router-dom.js?v=46f739bb:3297 React Router caught the following error during render Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

(I'm using react-firebase-hooks for those wondering where the useCollection are coming from).

How can I achieve this?

Answer 1

The error message:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

is telling you that you can't use a hook anywhere other than immediately inside a component function. This is rule #1 in the Rules of Hooks that you also see cited in the error message. Anywhere else is an error.

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

This has nothing to do with Firestore and its query. It is just about React hooks.

You have a call to the hook useCollection inside a useEffect hook. That's not valid. Try moving the useCollection elsewhere, such as in the component hook along with the other useCollection you have there. Or, simply don't use useCollection at all for the followup queries since React doesn't support non-deterministic use of hooks (because of the rules of hooks). You can perform a Firestore query using the normal API if you want, but you can't use useCollection there.