example.js

///////////////////////////////////////////////////////////
// loader
const { db } = require("../server/firebase");
module.exports = () => {
  return db.doc("some/path").get().data();
};

///////////////////////////////////////////////////////////
// Non-remix hook for docs, takes initial data for immediate
// rendering
import React from "react";
import { db } from "./client/firebase";

export function useDoc(path, initialData = null) {
  let [state, setState] = React.useState({
    status: "loading",
    doc: initialData,
  });
  React.useEffect(() => {
    return db.doc(path).onSnapshot((doc) => {
      setState({
        status: "subscribed",
        data: doc.data(),
      });
    });
  }, [path]);
  return state;
}

///////////////////////////////////////////////////////////
// Route
import { useRouteData } from "@remix-run/react";

export default function SomeRoute() {
  let initialData = useRouteData();
  let data = useDoc("some/path", initialData);
  return (
    <div>
      <h1>I'm live!</h1>
      <div>{data.whatever}</div>
    </div>
  );
}