Angular中使用变量作为Firestore集合路径报错问题求助

问题根源 #

你遇到的报错是因为类属性的初始化顺序问题：TypeScript中类的成员变量会在构造函数执行前完成初始化。当details$被创建时，this.fullname还没被构造函数里的代码赋值（此时为undefined），传入Firestore的collection方法自然会触发路径无效的错误。而用固定字符串时，路径是明确的，所以能正常运行。

解决方案 #

根据你的authService.getUser()是否为同步返回，分两种处理方式：

情况1：getUser()同步返回用户数据

将details$的初始化移到构造函数内部，或者使用Angular的ngOnInit生命周期钩子（更符合Angular最佳实践）：

import { Component, OnInit } from '@angular/core';
import { AuthService } from '替换为你的authService实际路径';
import { Firestore, collection, collectionData } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  user: any;
  fullname: string;
  details$!: Observable<Details[]>;

  constructor(private authService: AuthService, private readonly firestore: Firestore) {}

  ngOnInit(): void {
    this.user = this.authService.getUser();
    this.fullname = `${this.user.givenName} ${this.user.familyName}`;
    console.log('user: ', this.fullname);
    // 确保fullname赋值完成后再初始化集合
    this.details$ = collectionData(collection(this.firestore, this.fullname)) as Observable<Details[]>;
  }
}

情况2：getUser()异步返回（如返回Observable）

如果getUser()是异步获取用户数据（比如从AuthState监听），需要用switchMap处理异步流，避免获取到未定义的用户信息：

import { Component } from '@angular/core';
import { AuthService } from '替换为你的authService实际路径';
import { Firestore, collection, collectionData } from '@angular/fire/firestore';
import { Observable, of, switchMap } from 'rxjs';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  details$: Observable<Details[]>;

  constructor(private authService: AuthService, private readonly firestore: Firestore) {
    this.details$ = this.authService.getUser().pipe(
      switchMap(user => {
        // 处理用户未登录或信息不全的边界情况
        if (!user?.givenName || !user?.familyName) {
          return of([]);
        }
        const fullname = `${user.givenName} ${user.familyName}`;
        console.log('user: ', fullname);
        const userCollection = collection(this.firestore, fullname);
        return collectionData(userCollection) as Observable<Details[]>;
      })
    );
  }
}

额外验证点 #

• 确认fullname的值和Firestore中存在的集合名称完全一致（Firestore集合名称区分大小写、空格，不能包含特殊字符）。
• 检查Firestore安全规则，确保当前用户拥有访问该集合的读取权限。

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