person.tsx

const firestore = new Firestore();

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

export const PersonComponent = ({ personId }: Record<"personId", string>) => {
  const name = useSelector<any, any>(state => state.people[personId].name);
  const hairColor = useSelector<any, any>(
    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]
  );

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