React集成Firebase登录时报Cannot read properties of undefined (reading 'then')怎么办

这个TypeError: Cannot read properties of undefined (reading 'then')错误的触发原因，是firebase.loginUser(email, password)执行后返回了undefined，没有返回预期的Promise对象，所以无法调用Promise的.then方法。

• 首先检查你../Firebase文件中封装的loginUser方法是否正确返回了Firebase登录接口的Promise：
  你自己封装的loginUser必须显式return Firebase的登录方法返回的Promise，示例写法如下：

// ../Firebase 文件内的正确写法
export const loginUser = (email, password) => {
  // 必须加return，把Firebase auth方法返回的Promise暴露出去
  return getAuth().signInWithEmailAndPassword(email, password)
}

如果封装loginUser的时候没有写return，方法默认返回undefined，就会触发你遇到的报错。

• 其次检查FirebaseContext的上下文传递是否正常：
  确认你在应用顶层组件正确包裹了FirebaseContext.Provider，并且给value属性传入了初始化完成的Firebase实例，避免useContext(FirebaseContext)取到空值。

可以在调用登录方法前增加容错判断，避免异常报错阻断页面运行：

const handleSubmit = e => {
  e.preventDefault();
  // 增加存在性判断
  if(firebase?.loginUser) {
    firebase.loginUser(email, password)
    .then((user) => {
        setEmail('');
        setPassword('');
        props.history.push('/welcome');
    })
    .catch(error => {
        setError(error);
        setEmail('');
        setPassword('');
    })
  } else {
    setError('登录服务加载异常，请刷新后重试')
  }
}

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