How do you reading user document when logged in and skip if not

Hi guys, This might be a simple on and I am not professional in ReactJS. Q: In my home page I am reading, the user document for the logged in user. If the user is logged in I will display some information from it. If not, that section is hidden. const [user, loading, error] = useAuthState(auth); const [value, docLoading, docError] = useDocumentOnce(firestore.doc('/users/' + user.uid), { snapshotListenOptions: { includeMetadataChanges: true }, }); It throws an error for not logged in case and if I check the user value, then throws an error: “React Hook “useDocumentOnce” is called conditionally. React Hooks must be called in the exact same order in every component render” I can create a component/separate page might be a solution. Is there a better way to do this?

[mauriceackel]

Hi, I think you can make use of the fact that you can pass a null value as document reference here. You might want to try the following:

const [user, loading, error] = useAuthState(auth);
const [value, docLoading, docError] = useDocumentOnce(user ? firestore.doc('/users/' + user.uid) : null, {
    snapshotListenOptions: { includeMetadataChanges: true },
});

Perhaps it would also work with:

const [user, loading, error] = useAuthState(auth);
const [value, docLoading, docError] = useDocumentOnce(user && firestore.doc('/users/' + user.uid) , {
    snapshotListenOptions: { includeMetadataChanges: true },
});

[chrisbianca]

@mauriciosoares, as @mauriceackel says, the example you give wouldn’t work when the user is not defined as user.uid would throw an error so you would have to protect against this with a ternary, or similar, anyway, so in that instance you’d just be moving the same logic elsewhere in your code.

Whilst the React Query approach is another way of doing things, I’m loathe to introduce additional complexity to the codebase and feel that the use of a null / undefined document reference is a simpler take on the same thing.