How to use the react-firebase-hooks/firestore.useDocument function in react-firebase-hooks

export const withCurUserInfo = Component => props => {
  const { state: { firebase } } = useContext(SiteContext);
  const { initialising, user } = useAuthState(firebase.auth);
  const { loading, value } = useDocument(
    firebase && firebase.firestore.doc(`users/${user && user.uid}`)
  );

  if(loading || initialising) return ;

  if(props.redirect) return Component;

  if(value === null || !value.exists) { // pass in current user's profile details
    return ;
  }

  try {
    const curUser = Object.assign({}, user, value.data());
    return 

  } catch(e) {

export const Editor: React.FunctionComponent = ({
  match,
  history
}) => {
  const { id } = match && match.params;
  const [active, setActive] = React.useState(0);
  const [renderMain, setRenderMain] = React.useState(false);
  const [editNameMode, setEditNameMode] = React.useState(false);
  const theme = useTheme();

  // load the document containing meta about the project
  const { error, loading, value: meta } = useDocument(
    firebase
      .firestore()
      .collection("captions")
      .doc(id)
  );

  const [name, setName] = React.useState(meta ? meta.get("title") : "");

  const subcollection = firebase
    .firestore()
    .collection("captions")
    .doc(id)
    .collection("entries");

  // load the actual captions themselves
  const captions = useCollection(subcollection.orderBy("startTime"));

const RsvpViewContainer = ({
  curUser,
  fetchRsvpFirestore,
  createRsvpFirestore,
  updateRsvpFirestore,
  submitRsvpFirestore
}) => {
  const { dispatch } = useContext(SiteContext);
  const { value } = useDocument(fetchRsvpFirestore());
  const [rsvpState, updateRsvpState] = useState("FETCHING");
  const [localRsvpInfo, updateLocalRsvpInfo] = useState({ submitted: false });
  const rsvpRef = useRef();
  rsvpRef.current = localRsvpInfo;

  const updateRsvpInfo = newRsvpInfo => {
    const newLocalRsvpInfo = {
      ...localRsvpInfo,
      ...newRsvpInfo
    };

    updateLocalRsvpInfo(newLocalRsvpInfo);
    if (!newLocalRsvpInfo.submitted)
      dispatch({
        type: "UPDATE_DASHBOARD_TOAST",
        data: { toastName: "rsvpModified" }

const ApplicationViewContainer = ({
  curUser,
  fetchAppFirestore,
  createAppFirestore,
  updateAppFirestore,
  submitAppFirestore,
}) => {

  const { dispatch } = useContext(SiteContext);
  const { value } = useDocument(fetchAppFirestore());
  const [ appState, updateAppState ] = useState("FETCHING");
  const [ localAppInfo, updateLocalAppInfo ] = useState({ submitted: false });
  const appRef = useRef();
  appRef.current = localAppInfo;


  const updateAppInfo = newAppInfo => {
    const newLocalAppInfo = {
      ...localAppInfo,
      ...newAppInfo,
    };

    updateLocalAppInfo(newLocalAppInfo);
    if(!newLocalAppInfo.submitted) dispatch({ type: "UPDATE_DASHBOARD_TOAST", data: { toastName: "appModified" } });
  }

export const Recipe: React.FunctionComponent = ({ id }) => {
  const theme = useTheme();
  const user = useSession();
  const { value, loading, error } = useDocument(
    firebase
      .firestore()
      .collection("recipes")
      .doc(id)
  );

  if (loading) {
    return null;
  }

  if (!loading && !value.exists) {
    return null;
  }

  if (error) {
    return (