Ionic使用cordova-plugin-firebase时navCtrl导航报错求助

云原生阿岚

2026-5-27

搞定Ionic+cordova-plugin-firebase手机号验证后的跳转问题

嘿，看你的错误日志和代码，核心问题其实很明确——回调函数里的this指向不对！在window.FirebasePlugin.verifyPhoneNumber的成功回调里，普通函数的this已经不是你的Ionic组件实例了，所以this.navCtrl自然找不到，才会报Cannot read property...的错。

先解决跳转失败的问题，给你三个靠谱的办法：

1. 用箭头函数（最推荐，代码最简洁）

箭头函数会“继承”外部的this，直接把回调改成箭头函数，就能正确访问组件的navCtrl了：

window.FirebasePlugin.verifyPhoneNumber(phoneNumber, 60, (credential) => {
  console.log(credential);
  const verificationId = credential.verificationId;
  this.navCtrl.push(AuthDeviceVerifyPage, { verificationid: verificationId });
});

2. 提前存好组件的`this`

在调用验证方法前，先把组件的this存到一个变量里（比如that），然后在回调里用这个变量代替this：

const that = this;
window.FirebasePlugin.verifyPhoneNumber(phoneNumber, 60, function (credential) {
  console.log(credential);
  const verificationId = credential.verificationId;
  that.navCtrl.push(AuthDeviceVerifyPage, { verificationid: verificationId });
});

3. 用`bind`绑定上下文

给回调函数手动绑定组件的this，确保回调里的this指向正确：

window.FirebasePlugin.verifyPhoneNumber(phoneNumber, 60, function (credential) {
  console.log(credential);
  const verificationId = credential.verificationId;
  this.navCtrl.push(AuthDeviceVerifyPage, { verificationid: verificationId });
}.bind(this));