AngularFire2 Observable问题：管理员路由守卫TypeScript报错

我来帮你搞定这两个TypeScript报错，咱们一步步梳理问题和解决方案：

错误原因拆解 #

1. user.uid属性不存在：TypeScript把this.auth.user$返回的用户对象推断成了{}空类型，自然识别不了uid属性；
2. AngularFireObject不兼容Observable要求：switchMap期望接收Observable类型的返回值，但userService.get()返回的是AngularFireObject，它本身并不是Observable，需要转换后才能被处理；
3. 隐藏问题：你的AppUser接口里没定义isAdmin字段，但代码里直接用了appUser.isAdmin，这后续也会触发类型错误。

具体修复步骤 #

1. 修正AdminAuthGuard服务 #

修改admin-auth-guard.service.ts的canActivate方法，做两处关键调整：

• 给switchMap里的user指定firebase.User类型，让TypeScript识别uid；
• 在userService.get()后调用.valueChanges()，把AngularFireObject转换成Observable。

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { AuthService } from './auth.service';
import { UserService } from './user.service';
import { AppUser } from './models/app-user';
import * as firebase from 'firebase';

@Injectable({ providedIn: 'root' })
export class AdminAuthGuard implements CanActivate {
  constructor(private userService: UserService, private auth: AuthService) { }

  canActivate(): Observable<boolean> {
    return this.auth.user$.pipe(
      // 显式指定user为firebase.User类型
      switchMap((user: firebase.User) => this.userService.get(user.uid).valueChanges()),
      map(appUser => appUser.isAdmin)
    );
  }
}

2. 完善AppUser接口 #

在app-user.ts里补充isAdmin字段，保证类型匹配：

export interface AppUser {
  name: string;
  email: string;
  isActive: boolean;
  isAdmin: boolean; // 添加这个字段
}

3. 可选优化：给AuthService的user$指定类型 #

如果你的AuthService里的user$没定义类型，建议补上，后续使用会更清晰：

// 在auth.service.ts中
import { Observable } from 'rxjs';
import * as firebase from 'firebase';

// 示例定义，根据你的实际逻辑调整
user$: Observable<firebase.User | null>;

这样修改后，两个TypeScript错误都会被解决，同时也避免了后续isAdmin属性不存在的问题。

内容的提问来源于stack exchange，提问作者Zoe