React Firebase v9谷歌登录后如何重定向至首页？

问题原因 #

你遇到的重定向失败，是因为GoogleAuthProvider.credentialFromResult(result)可能返回null，此时直接访问credential.accessToken会抛出TypeError，导致then回调中的后续代码（包括navigate('/')）无法执行。

解决方案 #

根据业务需求选择以下两种处理方式：

方式1：保留凭证逻辑，添加空值保护

使用可选链操作符（?.）避免空值访问报错，确保重定向代码能正常执行：

const signInWithGoogle = async () => {
  signInWithPopup(auth, provider)
    .then((result) => {
      const credential = GoogleAuthProvider.credentialFromResult(result);
      const token = credential?.accessToken; // 可选链避免空值报错
      const user = result.user;
      navigate('/'); // 现在可正常执行重定向
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      const email = error.customData.email;
      const credential = GoogleAuthProvider.credentialFromError(error);
    });
};

方式2：移除非必要的凭证代码

如果业务逻辑不需要用到credential和accessToken，直接删除这两行代码即可：

const signInWithGoogle = async () => {
  signInWithPopup(auth, provider)
    .then((result) => {
      const user = result.user; // 仅保留必要的用户信息
      navigate('/'); // 重定向正常执行
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      const email = error.customData.email;
      const credential = GoogleAuthProvider.credentialFromError(error);
    });
};

补充说明 #

在Firebase v9的signInWithPopup流程中，登录成功时result.user一定会存在，但credential并非始终可用（部分登录场景下不会返回凭证对象），因此必须对credential的访问做空值处理，才能保证后续重定向逻辑正常执行。

内容的提问来源于stack exchange，提问作者user3178479