AngularでGoogleアカウントのログインユーザー情報を取得できない

Question

前提

Tuyano SYODA氏のAngular超入門P375でGoogleアカウントにログインして、firebaseに登録されているコレクションを表示させる機能を作る箇所があります。
その中でログインユーザーの情報を取得する部分があるのですが、以下のエラーが出力されます。

error TS2339: Property 'displayName' does not exist on type 'Promise<User>'.

以下のソースの「this.afAuth.currentUser.displayName」が問題となってます。

  get currentUser() {
    return this.afAuth != null ?
      this.afAuth.currentUser != null ?
        this.afAuth.currentUser.displayName :
        '(not logined.)' :
      '(not logined.)'
  }

ログインユーザーの情報を取得するには、どうすればよろしいでしょうか。
よろしくお願いいたします。

該当のソースコード

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import * as firebase from "firebase";
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-fire',
  templateUrl: './fire.component.html',
  styleUrls: ['./fire.component.css']
})
export class FireComponent implements OnInit {
  message: string = 'people data.';
  data: any;

  constructor(private db: AngularFirestore, public afAuth: AngularFireAuth) { }

  ngOnInit() {
    this.access();
  }

  access() {
    this.db.collection('people')
      .valueChanges()
      .subscribe(value=>{
        this.data = value;
      },
      error => {
        this.message = "(can't get data...)";
        this.data = null;
      });
  }

  login() {
    let provider = new firebase.default.auth.GoogleAuthProvider();
    this.afAuth.signInWithRedirect(provider)
      .then((result)=>{
        this.access;
    });
  }

  logout() {
    this.afAuth.signOut();
    this.access;
  }

  get currentUser() {
    return this.afAuth != null ?
      this.afAuth.currentUser != null ?
        this.afAuth.currentUser.displayName :
        '(not logined.)' :
      '(not logined.)'
  }

}

<div class="container">
    <h1>Firebase works!</h1>
    <div>
        <p>{{message}}</p>
        <button mat-raised-button (click)="login()">login</button>
        <button mat-raised-button (click)="logout()">logout</button>
        <p>USER: {{currentUser}}</p>
        <table>
            <tr>
                <th>Name</th>
                <th>Mail</th>
                <th>Age</th>
            </tr>
            <tr *ngFor="let item of data">
                <td>{{item['name']}}</td>
                <td>{{item['mail']}}</td>
                <td>{{item['age']}}</td>
            </tr>
        </table>
    </div>
</div>

試したこと

当初書籍通りに記述していたのですが

Property 'auth' does not exist on type 'AngularFireAuth'.

とエラーが出力されました。
このエラーは以下の記事からAngularFireAuthの仕様変更によるものだと分かったため、記事を参考に修正しました。
https://qiita.com/kokogento/items/e4114ace674b31cbd7bd
しかし、currentUserにdisplayNameが存在しないのか、以下のエラーで詰まっている状態です。

補足情報（FW/ツールのバージョンなど）

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.1.7
Node: 14.17.0
OS: win32 x64

Angular: 10.1.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.7
@angular-devkit/build-angular   0.1001.7
@angular-devkit/core            10.1.7
@angular-devkit/schematics      10.1.7
@angular/cdk                    10.2.7
@angular/cli                    10.1.7
@angular/fire                   6.1.5
@angular/material               10.2.7
@schematics/angular             10.1.7
@schematics/update              0.1001.7
rxjs                            6.6.7
typescript                      4.0.7

Answer 1

AngularFireAuth#currentUser プロパティの戻り値は Promise 型です。
ユーザー情報にアクセスするには、 then メソッドを使って Promise を解決しましょう。

this.afAuth.currentUser.then(user => console.log(user.displayName));

または async-await を使ってもよいですね。

async getUserName() {
  const user = this.afAuth.currentUser;
  console.log(user.displayName);
}