Angular 14中RouterLink传递Firestore文档ID为undefined问题

核心问题定位 #

URL出现undefined的本质是模板渲染时job.id未正确获取，要么是job对象未加载完成，要么是Firestore文档ID的读取方式错误。

具体排查与修复步骤 #

1. 修正Firestore文档ID的读取逻辑 #

Firestore默认不会把文档ID包含在返回的数据对象中，若用valueChanges()获取数据，需手动把ID添加到返回对象：

// 服务中获取单条数据示例
getJob(id: string): Observable<any> {
  return this.firestore.doc(`jobs/${id}`).snapshotChanges().pipe(
    map(action => {
      const data = action.payload.data() as any;
      const docId = action.payload.id; // 这才是正确的文档ID
      return { id: docId, ...data };
    })
  );
}

// 服务中获取列表数据示例
getJobs(): Observable<any[]> {
  return this.firestore.collection('jobs').snapshotChanges().pipe(
    map(actions => {
      return actions.map(action => {
        const data = action.payload.doc.data() as any;
        const docId = action.payload.doc.id;
        return { id: docId, ...data };
      });
    })
  );
}

2. 确保模板渲染时job对象已加载 #

异步获取的job可能在数据返回前就被渲染，导致job.id为undefined，可通过两种方式处理：

• 用*ngIf先判断job是否存在：

<!-- JobDetails组件模板 -->
<div *ngIf="job">
  <a [routerLink]="['/job-contact', job.id]">联系招聘方</a>
</div>

• 用可选链操作符避免报错：

<a [routerLink]="['/job-contact', job?.id]">联系招聘方</a>

3. 检查组件中job变量的赋值逻辑 #

确认JobDetails组件中job是否被正确赋值：

// job-details.component.ts
ngOnInit(): void {
  const jobId = this.route.snapshot.paramMap.get('id');
  if (jobId) {
    this.jobsService.getJob(jobId).subscribe(fetchedJob => {
      this.job = fetchedJob;
      console.log('加载的岗位数据:', this.job); // 打印确认ID是否存在
    });
  }
}

4. 优化JobContact组件的参数获取方式 #

若路由参数传递正确但组件获取不到，可改用订阅paramMap的方式（适配参数动态变化场景）：

// job-contact.component.ts
ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    this.jobId = params.get('id');
    console.log('路由获取的岗位ID:', this.jobId);
  });
}

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