Angular 5+FireStore+angularfire2：组件捕获文档不存在错误的方法

嘿，我碰到过一模一样的问题！其实核心原因你可能没注意到：FireStore的get()方法在文档不存在时不会抛出错误——它会正常返回一个DocumentSnapshot对象，只是这个对象的exists属性是false。你服务里的“Error: No such document!”应该是自己判断doc.exists后打印的，但并没有把这个情况转化为Observable流的错误，所以组件的catch代码块自然不会触发，因为流根本没报错！

下面给你两种正确的处理思路，根据你的业务场景选：

思路一：把“文档不存在”视为错误，让组件捕获处理 #

这种适合当“文档不存在”属于异常情况（比如用户输入了无效ID），需要用错误流程处理的场景。

第一步：修正服务代码 #

在服务里获取文档后，检查exists属性，如果不存在就主动抛出错误，同时确保错误能传递到组件：

// 记得导入需要的rxjs操作符和工具
import { catchError, map, tap } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable()
export class InvitationService {
  constructor(private afs: AngularFirestore) {}

  getInvitation(invitationId: string) {
    return this.afs.doc(`invitations/${invitationId}`).get()
      .pipe(
        // 检查文档是否存在，不存在就抛错
        tap(doc => {
          if (!doc.exists) {
            throw new Error('No such document!');
          }
        }),
        // 提取文档数据（如果存在的话）
        map(doc => doc.data()),
        // 日志错误并重新抛出，确保组件能捕获
        catchError(err => {
          console.log('Service error:', err);
          return throwError(() => err);
        })
      );
  }
}

第二步：组件中捕获错误处理 #

在组件里调用服务方法时，用catchError捕获错误，然后做后续操作（比如提示用户、跳转页面等）：

import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

// 组件内的方法
loadInvitation(invitationId: string) {
  this.invitationService.getInvitation(invitationId)
    .pipe(
      catchError(err => {
        // 这里就能拿到服务抛出的错误了！
        console.log('Component error:', err);
        // 比如显示错误提示
        this.errorMessage = '邀请不存在或已失效，请检查ID';
        // 返回一个空Observable，避免流终止影响其他操作
        return of(null);
      })
    )
    .subscribe(invitationData => {
      if (invitationData) {
        // 文档存在时的正常处理逻辑
        this.invitation = invitationData;
      }
    });
}

思路二：把“文档不存在”视为正常业务场景，返回空数据 #

如果“文档不存在”是预期内的情况（比如用户查询一个可能被删除的邀请），可以不用抛错误，直接返回空值，组件里判断处理：

服务代码 #

getInvitation(invitationId: string) {
  return this.afs.doc(`invitations/${invitationId}`).get()
    .pipe(
      map(doc => {
        if (doc.exists) {
          return doc.data();
        } else {
          console.log('No such document!');
          // 返回null或者空对象，让组件判断
          return null;
        }
      })
    );
}

组件代码 #

loadInvitation(invitationId: string) {
  this.invitationService.getInvitation(invitationId)
    .subscribe(invitationData => {
      if (invitationData) {
        // 存在的情况
        this.invitation = invitationData;
      } else {
        // 不存在的情况，直接处理
        this.showToast('该邀请不存在');
        // 比如跳转到首页
        this.router.navigate(['/home']);
      }
    });
}

关键注意点 #

• 别再被FireStore的get()误导了：文档不存在不是错误，是正常返回！必须手动判断exists来区分。
• 服务里如果用了catchError，一定要记得用throwError把错误重新抛出去，不然组件拿不到错误信号。

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