Firebase / Firestore version 9 SDK useDocument React Hook

useDocument.ts

import { useEffect, useState } from 'react';
import { doc, getDoc, DocumentData } from 'firebase/firestore';
import { db } from '@/lib/firebase';

export function useDocument(collection: string, id: string, callback?: any) {
  const [data, setData] = useState<DocumentData | undefined>(undefined);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<any>(null);

  useEffect(() => {
    const getDocument = async () => {
      setLoading(true);

      try {
        const docRef = doc(db, collection, id);
        const docSnap = await getDoc(docRef);

        if (docSnap.exists()) {
          setData(docSnap.data());
        } else {
          setData(undefined);
          console.log('No document!');
        }
      } catch (e) {
        setError(e.message);
      }
      setLoading(false);
    };
    getDocument();
  }, [callback]);

  return { data, loading, error };
}