Person.tsx

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { Firestore } from "@google-cloud/firestore";

const firestore = new Firestore();

interface Person extends Entity {
  name: string;
  hairColor: string;
}

export const PersonComponent = ({ personId }: Record<"personId", string>) => {
  const name = useSelector(state => state.people[personId].name);
  const hairColor = useSelector(state => state.people[personId].hairColor);
  const dispatch = useDispatch();

  useDoc<Person>(
    () => firestore.doc(personId),
    {
      subscribe: () => dispatch({ type: "person/subscribe", personId }),
      unsubscribe: () => dispatch({ type: "person/unsubscribe", personId }),
      data: person => dispatch({ type: "person/data", person }),
      error: error => dispatch({ type: "person/error", error })
    },
    [personId] // Ensure that we unsubscribe and re-subscribe when the personId changes
  );

  return (
    <div>
      <h1>Name: {name}</h1>
      <h3>Hair Color: {hairColor}</h3>
    </div>
  );
};