React hook for using Firestore SDK Version 9.

IQuery.ts

import { WhereFilterOp } from "firebase/firestore";

export interface IQuery {
  ref: string;
  operator: WhereFilterOp;
  value: any;
}

useFirestoreQuery.ts

import { useState } from "react";
import { fs } from "../config/firebase"; // const fs = useFirestore() from the initializeApp config
import { collection, query, where, getDocs, limit } from "firebase/firestore";

import useInterval from "./useInterval";
import { IQuery } from "../types/Firestore";

const useFirestore = (
  collectionString: string = "defaultCollection",
  limitNumber: number = 100,
  queryData?: IQuery
) => {
  const [data, setData] = useState<any[] | void>([]);

  // Instead of using the snapshot directly, im throttling the data updating to a second.
  useInterval(async () => {
    const result = await querySnapshot;
    setData(result);
  }, 1000);

  // Create a query against the collection.
  const q = queryData
    ? query(
        collection(fs, collectionString),
        where(queryData?.ref, queryData?.operator, queryData?.value),
        limit(limitNumber)
      )
    : query(collection(fs, collectionString), limit(limitNumber));

  const querySnapshot = getDocs(q)
    .then((snapshot) => {
      const data: any[] = snapshot.docs.map((doc) => {
        return {
          id: doc.id,
          ...doc.data(),
        };
      });
      return data;
    })
    .catch((error) => {
      console.error("Error getting documents: ", error);
    });

  return { data };
};

export default useFirestore;

useInterval.ts

// Original from 'https://usehooks-typescript.com/react-hook/use-interval'

import { useEffect, useRef } from "react";

function useInterval(callback: () => void, delay: number | null) {
  const savedCallback = useRef(callback);

  // Remember the latest callback if it changes.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    // Don't schedule if no delay is specified.
    if (delay === null) {
      return;
    }

    const id = setInterval(() => savedCallback.current(), delay);

    return () => clearInterval(id);
  }, [delay]);
}

export default useInterval;