Assistance With TS2570 Error: Property 'sendEmailVerification' does not exist on type 'Promise<User>'. Did you forget to use 'await'?

Question

我正在尝试在我的 Ionic Angular 项目上设置 Firebase。我正在使用链接教程 https://www.positronx.io/ionic-firebase-authentication-tutorial-with-examples/ 来执行此操作。

我不断收到 TS2570 错误：

Property 'sendEmailVerification' does not exist on type 'Promise'. Did you forget to use 'await'?

我附上了我的代码。我唯一改变的主要事情是 AngularFire 改变了 auth 在 6.0.0

中的使用方式

import { Injectable, NgZone } from '@angular/core';
import { auth } from 'firebase/app';
import { User } from "./user";
import { Router } from "@angular/router";
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})

export class AuthenticationService {
  userData: any;

  constructor(
    public afStore: AngularFirestore,
    public ngFireAuth: AngularFireAuth,
    public router: Router,
    public ngZone: NgZone
  ) {
    this.ngFireAuth.authState.subscribe(user => {
      if (user) {
        this.userData = user;
        localStorage.setItem('user', JSON.stringify(this.userData));
        JSON.parse(localStorage.getItem('user'));
      } else {
        localStorage.setItem('user', null);
        JSON.parse(localStorage.getItem('user'));
      }
    })
  }

  // Login in with email/password
  SignIn(email, password) {
    return this.ngFireAuth.signInWithEmailAndPassword(email, password)
  }

  // Register user with email/password
  RegisterUser(email, password) {
    return this.ngFireAuth.createUserWithEmailAndPassword(email, password)
  }

  // Email verification when new user register
  SendVerificationMail() {
      return this.ngFireAuth.currentUser.sendEmailVerification()
      .then(() => {
        this.router.navigate(['verify-email']);
      })
    }

  // Recover password
  PasswordRecover(passwordResetEmail) {
    return this.ngFireAuth.sendPasswordResetEmail(passwordResetEmail)
    .then(() => {
      window.alert('Password reset email has been sent, please check your inbox.');
    }).catch((error) => {
      window.alert(error)
    })
  }

  // Returns true when user is looged in
  get isLoggedIn(): boolean {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user !== null && user.emailVerified !== false) ? true : false;
  }

  // Returns true when user's email is verified
  get isEmailVerified(): boolean {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user.emailVerified !== false) ? true : false;
  }

  // Sign in with Gmail
  GoogleAuth() {
    return this.AuthLogin(new auth.GoogleAuthProvider());
  }

  // Auth providers
  AuthLogin(provider) {
    return this.ngFireAuth.signInWithPopup(provider)
    .then((result) => {
       this.ngZone.run(() => {
          this.router.navigate(['dashboard']);
        })
      this.SetUserData(result.user);
    }).catch((error) => {
      window.alert(error)
    })
  }

  // Store user in localStorage
  SetUserData(user) {
    const userRef: AngularFirestoreDocument<any> = this.afStore.doc(`users/${user.uid}`);
    const userData: User = {
      uid: user.uid,
      email: user.email,
      displayName: user.displayName,
      photoURL: user.photoURL,
      emailVerified: user.emailVerified
    }
    return userRef.set(userData, {
      merge: true
    })
  }

  // Sign-out
  SignOut() {
    return this.ngFireAuth.signOut().then(() => {
      localStorage.removeItem('user');
      this.router.navigate(['login']);
    })
  }

}

唯一一次被调用是在此处的注册页面

signUp(email, password){
        this.authService.RegisterUser(email.value, password.value)
        .then((res) => {
          // Do something here
          this.authService.SendVerificationMail()
          this.router.navigate(['verify-email']);
        }).catch((error) => {
          window.alert(error.message)
        })
    }

}

这些是项目中使用的依赖项：

    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/fire": "^6.0.0",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@capacitor/cli": "^2.0.1",
    "@capacitor/core": "^2.0.1",
    "@capacitor/ios": "^2.0.1",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "core-js": "^2.5.4",
    "firebase": "^7.14.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"

是否有人可以给我任何解决此问题的提示？我不是 100% 确定如何在函数上实现异步和等待而不显示更多错误。

Answer 1

我认为你应该将 .then 回调函数移动到组件中，因为在服务中，你正在返回 promise

在服务中

  // Email verification when new user register
  SendVerificationMail() {
      return this.ngFireAuth.currentUser.sendEmailVerification()
  }

并在组件中

signUp(email, password){
    this.authService.RegisterUser(email.value, password.value)
    .then((res) => {
        // Do something here
        this.authService.SendVerificationMail()
        .then(() => {
            this.router.navigate(['verify-email']);
        })
    }).catch((error) => {
        window.alert(error.message)
    })
}

Update

您可以保留所有内容，并在不在服务中的组件中的调用函数中添加 async / await

组件

async signUp(email, password){
  this.authService.RegisterUser(email.value, password.value)
  .then((res) => {
    // Do something here
    await this.authService.SendVerificationMail()
    this.router.navigate(['verify-email']);
  }).catch((error) => {
    window.alert(error.message)
  })
}

服务

// Email verification when new user register
SendVerificationMail() {
  return this.ngFireAuth.currentUser.sendEmailVerification()
  .then(() => {
    this.router.navigate(['verify-email']);
  })
}

Answer 2

新版本AngularFire 6.0.0发布，支持Angular9。不向后兼容旧版本。它不再支持旧版本的 Angular (<9)。它还放弃了对旧版本 Typescript(<3.6.4)、Firebase Javascript SDK (<7.13.1) 和 firebase-tools(<8.0.0).

的支持

'auth' 属性 of AngularFireAuth 已弃用，因此 'currentUser' 的用法也已更改。

'currentUser'是解析当前用户的promise。 属性 'sendEmailVerification' 上不存在 但可以通过已解析的用户轻松访问。

  // Email verification when new user register
  SendVerificationMail() {
    return this.ngFireAuth.currentUser.then(u => u.sendEmailVerification())
    .then(() => {
      this.router.navigate(['verify-email']);
    })
  }

Answer 3

我有这个问题。

import { auth } from 'firebase/app';

因为 firebase/app 正在被删除。这取代了什么？我遇到了 googleAuth() 的问题。以前我也有一个问题，能够在本地主机上使用弹出窗口登录，但在部署到 android phone.

时出错

 // Sign in with Gmail
  GoogleAuth() {
    return this.AuthLogin(new auth.GoogleAuthProvider());
  }

// Auth providers
AuthLogin(provider) {
return this.ngFireAuth.signInWithPopup(provider)
.then((result) => {
   this.ngZone.run(() => {
      this.router.navigate(['tabs']);
    })
  this.SetUserData(result.user);
}).catch((error) => {
  window.alert(error)
})
}

Answer 4

试试这个

// Send email verfificaiton when new user sign up   
async SendVerificationMail() {
(await this.afAuth.currentUser).sendEmailVerification()
.then(() => {
  this.router.navigate(['verify-email']);
})   }

查看此注释https://github.com/angular/angularfire/issues/2409

Assistance With TS2570 Error: Property 'sendEmailVerification' does not exist on type 'Promise<User>'. Did you forget to use 'await'?

Assistance With TS2570 Error: Property 'sendEmailVerification' does not exist on type 'Promise<User>'. Did you forget to use 'await'?

firebase

typescript

angularfire

ionic-framework

angular