Tengo un gancho personalizado para consultar una colección / documento específico de Firebase Firestore.

import { useContext, useEffect, useState } from 'react';

import { FirebaseContext } from 'providers/Firebase/FirebaseContextProvider';

const useFireStore = (
  collection: string,
  doc: string,
  loadingDelay: number = 0,
) => {
  const { firestore } = useContext(FirebaseContext);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [document, setDocument] = useState<
    firebase.firestore.DocumentData | undefined
  >();

  useEffect(() => {
    setLoading(true);
    setDocument(undefined);
    const docRef = firestore.collection(collection).doc(doc);
    docRef
      .get()
      .then(doc => {
        setDocument(doc.data());
        setTimeout(() => {
          setLoading(false);
        }, loadingDelay);
      })
      .catch(e => {
        setError(e);
        setLoading(false);
      });
  }, [collection, loadingDelay, doc, firestore]);

  return [document, loading, error];
};

export default useFireStore;

Lo uso así:

const [details, loading, error] = useFireStore('listDetails', `${id}`, 300);

Cuando paso el mouse sobre document y const [document, setDocument] = useState en el gancho, veo que el tipo document será:

const document: firebase.firestore.DocumentData | undefined

Sin embargo, cuando paso el mouse sobre document en const [details, loading, error] = ... en el componente, veo los tipos posibles como:

const details: boolean | firebase.firestore.DocumentData | null | undefined

¿De dónde viene esto posible boolean o null?

0
Justin Noel 23 sep. 2019 a las 14:50

1 respuesta

La mejor respuesta

Resolví esto escribiendo el retorno del gancho useFireStore como:

const useFireStore = (
  collection: string,
  doc: string,
  loadingDelay: number = 0,
): [firebase.firestore.DocumentData | undefined, boolean, Error | null] => {
...
}
0
Justin Noel 24 sep. 2019 a las 20:33