Angular/Firestore中删除当前登录用户购物车商品无响应问题排查

核心问题分析 #

1. 未注入Firestore实例：组件代码中使用了this.dbstore但未在构造函数中注入AngularFirestore，直接导致运行时错误，点击按钮时代码执行中断。
2. 冗余的文档检查：调用get()订阅后再删除属于多余操作，Firestore的delete()方法本身允许删除不存在的文档，不会抛出错误。
3. onAuthStateChanged的不当使用：每次点击删除按钮都重复订阅用户状态，易造成内存泄漏，且代码冗余。
4. 参数命名混淆：函数参数productID实际接收的是Product对象，命名不准确易引发误解。

修复后的组件代码 #

import { Product } from 'src/app/models/product.model';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent implements OnInit {
  constructor(private auth: AngularFireAuth, private dbstore: AngularFirestore) {}

  onDeleteProductOnShoppingCart(product: Product) {
    this.auth.user.pipe(take(1)).subscribe(userAuth => {
      if (userAuth?.uid) {
        const userShoppingProduct = this.dbstore
          .collection('users')
          .doc(userAuth.uid)
          .collection('shopping');
        
        userShoppingProduct.doc(product.id).delete()
          .then(() => {
            // 同步更新本地商品列表，避免页面数据不同步
            this.products = this.products.filter(item => item.id !== product.id);
          })
          .catch(error => {
            // 捕获错误便于调试
            console.error('删除商品失败:', error);
          });
      }
    });
  }
}

模板代码优化（可选） #

模板逻辑本身无错误，可将图片绑定改为Angular安全绑定方式：

<div class="mb-3" *ngFor="let product of products">
    <img class="w-24 h-24 rounded-lg" [src]="product.imageURL[0]" alt="商品图片">
    <p class="text-sm pt-2 font-medium text-gray-900 truncate dark:text-white">
      {{ product.name }}
    </p>
    <p class="text-sm price-cart  truncate dark:text-gray-400">
     <strong>{{ product.price | currency: 'XOF'}}</strong>
     <span style="color:black"> x {{ product.quantity }}</span>
    </p>
    <div class="inline-flex delete-btn absolute top-0 right-2 mt-1 items-center text-base font-semibold text-gray-900 dark:text-white">
       <button (click)="onDeleteProductOnShoppingCart(product)">delete</button>
    </div>
</div>

额外调试建议 #

• 打开浏览器开发者工具的Console面板，查看是否有报错信息，这是定位问题的核心依据。
• 确认Firestore规则允许当前用户删除自己购物车中的文档，示例规则：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /users/{userId}/shopping/{productId} {
        allow delete: if request.auth != null && request.auth.uid == userId;
      }
    }
  }
  

内容的提问来源于stack exchange，提问作者Stéphane Konan