Angular+Firebase Firestore如何筛选含指定用户ID的项目文档？

核心实现方案 #

假设你的projects集合中每个文档都包含creatorUid字段（存储项目创建者的UID），以下是两种常用实现方式：

方式1：使用AngularFire（@angular/fire）封装库

这是Angular集成Firebase的主流方式，代码如下：

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

// 定义项目类型接口
interface Project {
  id: string;
  creatorUid: string;
  // 补充你的项目其他字段
}

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html'
})
export class ProjectsComponent {
  private projectsCollection: AngularFirestoreCollection<Project>;
  // 用于模板绑定的项目Observable
  projects$: Observable<Project[]>;

  constructor(private afs: AngularFirestore) {
    // 替换为你要筛选的目标用户UID
    const targetCreatorUid = 'your-target-user-uid';
    
    // 构建筛选查询：匹配creatorUid等于目标UID的文档
    this.projectsCollection = this.afs.collection<Project>('projects', ref => 
      ref.where('creatorUid', '==', targetCreatorUid)
    );
    
    // 获取包含文档ID的项目列表
    this.projects$ = this.projectsCollection.valueChanges({ idField: 'id' });
  }
}

模板中通过async管道订阅展示数据：

<div *ngFor="let project of projects$ | async">
  <h4>项目ID: {{ project.id }}</h4>
  <p>创建者UID: {{ project.creatorUid }}</p>
  <!-- 渲染其他项目信息 -->
</div>

方式2：使用原生Firebase SDK

如果直接使用Firebase官方SDK，可采用异步查询方式：

import { Component } from '@angular/core';
import { Firestore, collection, query, where, getDocs } from '@angular/fire/firestore';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html'
})
export class ProjectsComponent {
  projects: any[] = [];

  constructor(private firestore: Firestore) {
    this.fetchProjectsByCreator('your-target-user-uid');
  }

  // 异步获取筛选后的项目
  async fetchProjectsByCreator(targetUid: string) {
    // 构建查询条件
    const projectQuery = query(
      collection(this.firestore, 'projects'),
      where('creatorUid', '==', targetUid)
    );

    // 执行查询并解析结果
    const querySnapshot = await getDocs(projectQuery);
    this.projects = querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
  }
}

常见问题排查 #

如果之前的代码无效，检查以下几点：

• 字段名匹配：确保查询的creatorUid字段与Firestore文档中的字段完全一致（Firestore字段名大小写敏感）
• 权限配置：检查Firestore安全规则是否允许当前用户读取目标文档。示例规则：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /projects/{project} {
        // 允许登录用户读取自己创建的项目
        allow read: if request.auth != null && resource.data.creatorUid == request.auth.uid;
      }
    }
  }
  

• 订阅方式正确：使用AngularFire时必须通过async管道或组件内订阅获取数据；原生SDK需确保异步方法执行完成后再处理数据
• UID参数正确：确认传入的目标UID是有效的用户ID，而非文档ID或其他错误值

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