使用 firebase.User 方法从 firebase angular 项目获取登录用户的用户名时出错

Question

下面是我的代码行，我在获取当前用户名以在浏览器上显示时出错。

我创建了一个导航栏，它有一个下拉列表，只显示给登录用户。登录也能正常工作，但我无法在下拉菜单中显示当前用户名。我正在使用 google 使用 firebase 的身份验证。

我在下面的行中遇到错误，

user: firebase.User;

错误：

Namespace '"E:/Workspace/Angular/oshop/node_modules/firebase/app/dist/app/index"' has no exported member 'User'".

请参阅下面的代码。

bs-navbar.component.ts

import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFireModule } from '@angular/fire/compat';
import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase/app';
import { getAuth, onAuthStateChanged } from "firebase/auth";

//const auth = getAuth();
//const user = auth.currentUser;

@Component({
  selector: 'bs-navbar',
  templateUrl: './bs-navbar.component.html',
  styleUrls: ['./bs-navbar.component.css']
})
export class BsNavbarComponent {  
  user: firebase.User;

  constructor(private afAuth: AngularFireAuth) {
    afAuth.authState.subscribe(user => this.user = user)
   }

  logout(){
    this.afAuth.signOut().then(() => {
      window.alert('Logged out');
    })
  }

}

Answer 1

您可以从 Firebase Auth SDK 导入 User，如下所示：

// Remove this import
// import * as firebase from 'firebase/app';

import { User, getAuth, onAuthStateChanged } from "firebase/auth";

export class BsNavbarComponent {  
  user: User;
}

使用 firebase.User 方法从 firebase angular 项目获取登录用户的用户名时出错

Getting error while using firebase.User method to get username of logged in user from firebase angular project

firebase

typescript

firebase-authentication

angular