hooks.tsx

type Loading<T extends object> =
  | { loading: true }
  | { loading: false; error: true }
  | ({ loading: false; error: false } & T)

function usePlayer(id: PlayerId): Loading<{ data: Player }> {
  const { value, loading, error } = useDocument(database.players.doc(id))
  if (loading) return { loading: true }
  if (error) return { loading: false, error: true }
  return { loading: false, error: false, data: value.data() }
}

const renderPlayer: React.SFC<{ id: PlayerId }> = ({ id }) => {
  const player = usePlayer(id)

  if (player.loading) return <div>Loading...</div>
  if (player.error) return <div>error...</div>

  return <div>welcome, {player.data.name}!</div>
}