Allow `useFirestoreDoc` `DocumentReference` arguments to be nullable

react-firebase-hooks allows the document reference to useDocument to be nullable and just returns undefined if it is. This was useful for paths relying on nullable info, like auth.currentUser.uid:

const [snapshot, loading, error] = useDocument(auth.currentUser && firestore.doc(`users/${auth.currentUser.uid}`));

where if the user were not signed in there wouldn’t be an error thrown since useDocument would just return undefined. It would be nice if a similar feature were added to reactfire, as

const { status, data: firebaseDoc } = useFirestoreDoc(auth.currentUser && doc(firestore, 'users', auth.currentUser.uid));

won’t work as the type of ref is DocumentReference, not DocumentReference | null,

const { status, data: firebaseDoc } = useFirestoreDoc(doc(firestore, 'users', auth.currentUser?.uid));

will throw an error when the user is not signed in (as the path will become invalid), and

if (auth.currentUser) {
    const { status, data: firebaseDoc } = useFirestoreDoc(doc(firestore, 'users', auth.currentUser.uid));
}

violates the rules of hooks. Currently relying on a rather abhorrent workaround to resolve this and it would be ideal if reactfire could support this behavior natively.

[sarelp]

Hi @jhuleatt , I have read your comments in #178. I do however believe that there is still a necessity for this.

Specifically, in our codebase, we have a number of documents referencing each other i.e.

type Page = {
   id: string,
   theme: DocumentReference(Theme) | null,
   view?: DocumentReference(View) | null,
   user?: DocumentReference(User) | null,
}

Rendering requires getting a number of documents which is not easily broken down into subcomponents. In our case it would require nesting a number of levels deep.

Having a nullable or undefined argument will greatly simplify things. We do have undefined and null in javascript to distinguish to enable the API to distinguish between not yet resolved and not available.

useFirestoreDoc(null) can still return a doc but with doc.data() == null and doc.exists() == false

[hubertkuoch]

Hi there - thanks for the very helpful lib @jhuleatt.

Just jumping in as there is actually a use-case where breaking into small components might not be convenient. This happens whenever you want to feed a component with remote default values if they exist, I think it is actually a quite common use-case.

Just to illustrate simply this use-case, say we have a public contact form page.

• If the user is anonymous : inputs are left blank (normal behaviour)
• If the user is logged in, inputs are filled with the logged-in user information automatically as default values, fetched from database.

In this very case, breaking into small components might not be very practical as we need to create dedicated wrapper component only to fetch the data and populate the default values.

const Form = ({defaultValue}:{defaultValue?: User}) => {
    return (
        <form>
            <input defaultValue={defaultValue.name} disabled={!!defaultValue}/>
        <form>
    )
}

const FormWithDefaultValue = ({uid}:{uid: string}) => {
    const userRef = useFirestore().collection('users').doc(uid)

    const { data } = useFirestoreDoc(userRef);

    return (
        <Form defaultValue={data}>
    )
}

const ContactPage = () => {
    const {data: signInCheckResult} = useSigninCheck()
    
    if (signInCheckResult.signedIn) {
        return <FormWithDefaultValue/>
    } else {
        return <Form/>
    }
}

Happy to get your views, thanks.

(Disclaimer: I might not yet very familiar with ReactFire, please forgive me if I miss understood its usage philosophy).