React使用react-intl-tel-input对接Firebase认证提示号码未注册怎么办

核心问题根因 #

• 状态取值不匹配：你在提交验证的onSignInSubmit方法中，读取的手机号变量是this.state.mobile，但使用react-intl-tel-input组件时，手机号是通过onPhoneNumberChange回调存储在this.state.phoneNumber字段中，mobile字段只有用原生input时才会被赋值，使用组件时该字段为未定义，自然查询不到注册信息。
• 号码格式不一致：react-intl-tel-input默认返回的是带国际区号前缀的完整手机号（例如中国手机号会返回+8613xxxxxxxxx），如果你数据库中存储的是不带区号的纯手机号，格式不匹配也会导致查询失败。

具体修复步骤 #

1. 修正提交时的状态取值
   将onSignInSubmit方法中的取值逻辑替换为：

const phoneNumber = this.state.phoneNumber

2. 统一号码存储/查询格式
   根据你的数据库现有存储规则二选一即可：

• 方案一：后续注册用户时直接存储react-intl-tel-input返回的带区号的完整手机号，和查询逻辑保持一致
• 方案二：查询前对返回的手机号做裁剪，适配现有存储格式，例如国内手机号可以去掉+86前缀：

// 适配国内手机号存储格式的示例
const formattedPhone = phoneNumber.replace(/^\+86/, '')
// 用formattedPhone去查询数据库
get(child(dbRef, `Users/${formattedPhone}`)).then(...)

3. 可选优化
   可以在handlePhoneChange中加号码合法性判断，避免无效提交：

handlePhoneChange = (status, phoneNumber, country) => {
  // 仅当输入号码符合所选国家的格式规则时才存储状态
  if (status) {
    this.setState({ phoneNumber });
  }
};

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