Angular集成Cloud Firestore时自定义用户数据（姓名、年龄、手机号）无法显示的问题排查与解决

我看了你的代码，问题出在你页面绑定的是Firebase Auth的用户对象，而不是存在Firestore里的完整用户数据。下面给你拆解原因和解决办法：

为什么自定义字段显示不出来？ #

Firebase Auth的user对象（就是你在authState里拿到的result.user）只包含Auth核心字段：比如uid、email这些，不会自动包含你存在Firestore里的自定义字段（name、age、phoneNumber）。

你现在页面里用的authService.userData是直接从afAuth.authState存下来的Auth用户对象，自然拿不到Firestore里的自定义数据，所以只能显示email和uid。

解决步骤 #

1. 在Auth Service里监听Firestore的完整用户文档 #

修改auth.service.ts，把原来的userData替换成一个Observable，用来监听Firestore中当前用户的完整数据：

// 先导入需要的rxjs操作符和类型
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import firebase from 'firebase/compat/app';

// 替换原来的userData: any;
public user$: Observable<User | null>;

constructor(
  private http: HttpClient,
  private alertCtrl: AlertController,
  public afs: AngularFirestore,
  public afAuth: AngularFireAuth,
  public router: Router
) {
  // 同时监听Auth状态和Firestore用户文档
  this.user$ = this.afAuth.authState.pipe(
    switchMap(user => {
      if (user) {
        // 用户已登录，拉取Firestore里的完整用户数据
        return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
      } else {
        // 用户未登录，返回null
        return of(null);
      }
    })
  );

  // 同步更新localStorage的完整用户数据
  this.user$.subscribe(user => {
    localStorage.setItem('user', JSON.stringify(user));
  });
}

2. 调整页面的绑定逻辑 #

在home.page.html里，用async管道来订阅这个Observable，这样就能拿到完整的用户数据了：

<ion-content>
  <!-- Show user data when logged in -->
  <div class="row" *ngIf="authService.user$ | async as user">
    <div class="col-md-12">
      <div class="media-body">
        <h1>Hello: <strong>{{user.name}}</strong></h1>
        <p>User ID: <strong>{{user.uid}}</strong></p>
        <p>Email: <strong>{{user.email}}</strong></p>
        <p>Phone number: <strong>{{user.phoneNumber}}</strong></p>
        <p>Age: <strong>{{user.age}}</strong></p>
      </div>
    </div>
  </div>
</ion-content>

3. 优化setUserData的类型安全性 #

为了避免自定义字段出现undefined，给参数加默认值：

setUserData(user: firebase.User, name?: string, phoneNumber?: string, age?: string) {
  const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
  const userData: User = {
    uid: user.uid,
    name: name || '',
    email: user.email || '',
    phoneNumber: phoneNumber || '',
    age: age || ''
  };
  return userRef.set(userData, { merge: true });
}

4. 检查Firestore安全规则 #

确保已登录用户能读取自己的文档，否则会拿不到数据：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{uid} {
      allow read, write: if request.auth != null && request.auth.uid == uid;
    }
  }
}

这样调整后，页面就能正确显示来自Firestore的所有自定义用户数据了。

内容的提问来源于stack exchange，提问作者P. Mark