Angular+Firebase查询功能异常求助：输入ID无法回显数据

我在Angular项目中结合Firebase开发费用数据查询功能时遇到问题：输入查询ID后，对应数据无法填充到表单字段中，控制台出现错误。保存功能正常，但查询功能失效。

相关代码片段 #

组件代码

import { Component } from '@angular/core';
import {ExpensesService} from "../../Expenses.service";
import {FormControl, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-find-expenses-data',
  templateUrl: './find-expenses-data.component.html',
  styleUrls: ['./find-expenses-data.component.scss']
})
export class FindExpensesDataComponent {
  constructor(private service:ExpensesService) {
  }

  expenseDataform=new FormGroup({
    title:new FormControl('',Validators.required),
    des :new FormControl('',Validators.required),
    cost :new FormControl(0,Validators.required)
  });
  findData(){

    this.service.finddatabyid(this.expenseDataform.get('id')?.value!)
      .subscribe(response => {
        this.expenseDataform.patchValue({
          title:response.title,
          des:response.des,
          cost:response.cost,
        });
        },error => {
      console.log(error);
    })
  }
}

服务代码（service.ts）

finddatabyid(id:string):Observable<any>{
  return this.store.doc(`expense/${id}`).valueChanges({idField:'id'});
}

HTML代码

<form [formGroup]="expenseDataform">
  <div class="container">
    <div class="column">

      <div class="col-3">
        <div class="form-group">
          <label for="id"id="id">ID</label>
          <input (keyup.enter)="findData()"  type="text"class="form-control"formControlName="id">
        </div>
      </div>

      <div class="col-3">
        <div class="form-group">
          <label for="title"id="title">Title</label>
          <input type="text"class="form-control"formControlName="title">
        </div>
      </div>

      <div class="col-3">
        <div class="form-group">
          <label for="des"id="des">Description</label>
          <input type="text"class="form-control"formControlName="des">
        </div>
      </div>

      <div class="col-3">
        <div class="form-group">
          <label for="cost"id="cost">Cost</label>
          <input type="number"class="form-control"formControlName="cost">
        </div>
      </div>
    </div>
  </div>
</form>

问题分析与修复方案 #

1. 表单缺失ID控件定义

HTML中使用了formControlName="id"，但组件的expenseDataform未声明对应的FormControl，导致Angular无法识别该控件，获取值时直接报错。

修复：
在组件的FormGroup中添加ID控件：

expenseDataform = new FormGroup({
  id: new FormControl('', Validators.required), // 新增ID控件
  title: new FormControl('', Validators.required),
  des: new FormControl('', Validators.required),
  cost: new FormControl(0, Validators.required)
});

2. Firebase查询方式不匹配单次场景

valueChanges()会持续监听文档的实时变化，对于单次查询需求，使用get()获取单次快照更合适，避免不必要的订阅残留。

修复：
修改服务中的查询方法：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

finddatabyid(id: string): Observable<any> {
  return this.store.doc(`expense/${id}`).get().pipe(
    map(doc => {
      if (doc.exists) {
        return { id: doc.id, ...doc.data() }; // 合并文档ID与数据
      } else {
        throw new Error('目标费用记录不存在');
      }
    })
  );
}

3. 空值处理不严谨

直接强制断言this.expenseDataform.get('id')?.value!非空，若ID输入为空会传入无效参数给Firebase，引发请求错误。

修复：
在组件的findData()方法中先校验ID有效性：

findData() {
  const expenseId = this.expenseDataform.get('id')?.value;
  if (!expenseId) {
    console.error('请输入有效的费用记录ID');
    return;
  }

  this.service.finddatabyid(expenseId)
    .subscribe(response => {
      this.expenseDataform.patchValue({
        title: response.title,
        des: response.des,
        cost: response.cost
      });
    }, error => {
      console.error('查询失败:', error.message);
    });
}

4. 可选优化：添加查询按钮

仅依赖回车触发查询不够直观，可在HTML中添加按钮：

<div class="col-3">
  <div class="form-group">
    <label for="id">ID</label>
    <input type="text" class="form-control" formControlName="id">
    <button class="btn btn-primary mt-2" (click)="findData()">查询费用记录</button>
  </div>
</div>

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