React结合Firebase开发注册功能报then未定义TypeError错误

问题现象 #

• 密码长度不足6位提交时，控制台抛出Uncaught TypeError: Cannot read properties of undefined (reading 'then')，页面预设的错误提示无法正常展示
• 提交符合校验规则的注册信息时，用户数据可正常写入Firebase，但控制台仍然抛出上述相同错误

问题根因 #

报错核心原因是自定义封装的firebase.signUpUser方法未返回Promise实例，外层组件调用时直接在undefined值上读取.then属性触发类型错误：

• 密码不符合Firebase规则时，SDK会直接抛出校验异常，由于封装方法未返回Promise链，异常无法被外层的.catch捕获，直接在控制台抛出，页面错误提示逻辑不触发
• 注册流程正常完成时，即使内部写库逻辑执行成功，只要封装方法没有将Firebase SDK返回的Promise向外返回，外层调用拿到的返回值仍然是undefined，读取then方法时必然报错

修复步骤 #

1. 修正Firebase封装层方法 #

找到FirebaseContext对应的Firebase封装文件，修改signUpUser方法，必须将Firebase Auth接口返回的Promise实例return到外层，链式调用的额外逻辑也要保证Promise链连续：

// Firebase封装文件内signUpUser参考实现
signUpUser(email, password, pseudo) {
  // 必须加return，把Promise实例返回给调用方
  return this.auth.createUserWithEmailAndPassword(email, password)
    .then(userCred => {
      // 写入用户额外信息（比如昵称）到数据库，也要return保证Promise链状态同步
      return this.db.collection('users').doc(userCred.user.uid).set({
        pseudo: pseudo,
        email: email
      })
    })
}

隐藏问题：当前组件调用signUpUser时仅传了邮箱和密码，用户输入的pseudo昵称字段没有传入，注册成功后无法存储用户昵称，需要同步补全参数传递。

2. 调整组件提交逻辑 #

修改SignUp组件的handleSubmit方法，补全传参，可增加前置校验提前拦截非法输入：

const handleSubmit = e => {
  e.preventDefault();
  // 从loginData中解构出需要的所有字段
  const {email, password, pseudo} = loginData;
  // 前置校验提前拦截，减少无效请求
  if (password.length < 6) {
    setError({message: "密码长度不能少于6位"});
    return;
  }
  // 补传pseudo参数
  firebase.signUpUser(email, password, pseudo)
    .then(() =>{
      setError('')
      setLoginData({...data})
    })
    .catch(err => {
      setError(err);
      // 注册失败仅清空密码字段，减少用户重复输入成本
      setLoginData(prev => ({...prev, password: '', confirmPassword: ''}))
    })
}

3. 优化错误提示容错 #

给错误提示增加可选链兜底，避免error对象为空时读取message属性触发二次报错：

const errorMsg = error?.message && <span className="error-text">{error.message}</span>

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