Angular 12开发Firestore管理员面板：如何获取所有用户的嵌套集合数据

嘿，我来帮你搞定这个管理员查看所有用户订单的问题！你现在的服务只能获取Customer集合的顶层数据，没法拿到每个用户下的Order子集合数据，所以得调整一下代码逻辑，遍历所有用户文档并获取对应的子集合订单。

核心思路 #

要实现管理员查看所有用户的全部订单，需要三步走：

1. 先获取Customer集合里的所有用户文档（包含每个用户的UID）
2. 对每个用户文档，根据其UID拼接路径，获取对应的Order子集合数据
3. 把所有用户的信息和他们的订单数据合并，返回给组件展示

修改后的服务代码 #

首先更新你的OrderlistsService，新增一个供管理员使用的方法：

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable, forkJoin } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

// 先定义你的数据接口，根据实际字段调整
export interface Customer {
  uid: string;
  // 比如用户姓名、邮箱等其他字段
  name?: string;
  email?: string;
}

export interface Order {
  orderId?: string;
  // 比如订单日期、总价、商品列表等字段
  orderDate?: Date;
  total?: number;
}

@Injectable({
  providedIn: 'root'
})
export class OrderlistsService {
  constructor(private firestore: AngularFirestore) {}

  // 原方法：供普通用户获取自己的订单（可保留）
  getOrdersItems(userId: string): Observable<Order[]> {
    return this.firestore.collection<Order>(`Customer/${userId}/Order`).valueChanges();
  }

  // 新增方法：供管理员获取所有用户的订单
  getAllOrdersForAdmin(): Observable<{ customer: Customer; orders: Order[] }[]> {
    // 先获取所有用户文档，用snapshotChanges拿到文档ID（即用户UID）
    return this.firestore.collection<Customer>('Customer').snapshotChanges().pipe(
      map(customerDocs => {
        // 为每个用户创建获取其订单的Observable
        const customerOrderObservables = customerDocs.map(doc => {
          const customerData = doc.payload.doc.data() as Customer;
          const customerUid = doc.payload.doc.id; // 这里就是用户的UID

          // 获取该用户的Order子集合
          return this.firestore.collection<Order>(`Customer/${customerUid}/Order`).valueChanges().pipe(
            map(orders => ({
              customer: { ...customerData, uid: customerUid }, // 补全用户UID
              orders: orders
            }))
          );
        });

        // 用forkJoin等待所有用户的订单数据都加载完成
        return forkJoin(customerOrderObservables);
      }),
      switchMap(combinedData => combinedData)
    );
  }
}

在管理员组件中使用 #

接下来在你的管理员面板组件里调用这个方法：

import { Component, OnInit } from '@angular/core';
import { OrderlistsService, Customer, Order } from './orderlists.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-admin-order-panel',
  templateUrl: './admin-order-panel.component.html',
  styleUrls: ['./admin-order-panel.component.css']
})
export class AdminOrderPanelComponent implements OnInit {
  allCustomerOrders$!: Observable<{ customer: Customer; orders: Order[] }[]>;

  constructor(private orderService: OrderlistsService) {}

  ngOnInit(): void {
    // 调用管理员方法获取所有订单
    this.allCustomerOrders$ = this.orderService.getAllOrdersForAdmin();
  }
}

模板展示数据 #

在组件模板里用async管道订阅Observable，展示所有用户和他们的订单：

<div class="admin-panel">
  <h2>所有用户订单</h2>
  <div *ngFor="let customerGroup of allCustomerOrders$ | async" class="customer-section">
    <h3>用户UID: {{ customerGroup.customer.uid }}</h3>
    <p *ngIf="customerGroup.customer.name">姓名: {{ customerGroup.customer.name }}</p>
    <p *ngIf="customerGroup.customer.email">邮箱: {{ customerGroup.customer.email }}</p>

    <div class="orders-list">
      <h4>订单列表</h4>
      <div *ngIf="customerGroup.orders.length === 0" class="no-orders">
        该用户暂无订单
      </div>
      <div *ngFor="let order of customerGroup.orders" class="order-item">
        <p>订单ID: {{ order.orderId }}</p>
        <p>订单日期: {{ order.orderDate | date:'yyyy-MM-dd HH:mm' }}</p>
        <p>总价: {{ order.total | currency }}</p>
        <!-- 根据你的订单字段添加更多展示内容 -->
      </div>
    </div>
  </div>
</div>

关键注意事项：Firestore安全规则 #

别忘了更新你的Firestore安全规则，确保管理员能读取所有用户的Customer文档和Order子集合，同时普通用户只能访问自己的数据：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 普通用户只能访问自己的Customer文档和Order子集合
    match /Customer/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
      
      match /Order/{orderId} {
        allow read, write: if request.auth != null && request.auth.uid == userId;
      }
    }

    // 管理员可以访问所有用户的Customer和Order数据
    match /Customer/{userId} {
      allow read: if request.auth != null && request.auth.token.admin == true;
      
      match /Order/{orderId} {
        allow read: if request.auth != null && request.auth.token.admin == true;
      }
    }
  }
}

这里假设你给管理员的Auth令牌添加了admin: true的自定义声明，你可以在Firebase控制台的Authentication里配置自定义令牌或者通过云函数设置。

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