使用Angular 12开发时无法向Firestore插入记录无报错问题求助

1. 优先检查Firestore安全规则 #

默认新创建的Firestore数据库安全规则会禁止未认证的读写操作，这是最常见的静默失败原因。你可以先临时将规则改为测试模式验证：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

注意：测试完成后务必修改为符合业务安全要求的规则，避免数据泄露

2. 检查AngularFire初始化配置 #

确认你在app.module.ts中已经正确导入并初始化Firebase相关模块：

// 先导入依赖
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { environment } from '../environments/environment'; // 里面放你的firebase配置

@NgModule({
  imports: [
    // 其他导入
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
  ],
  // 其他配置
})
export class AppModule { }

同时确认environment.ts里的firebase配置参数和Firebase控制台给出的完全一致。

3. 修复现有代码逻辑问题 #

3.1 修正resetForm逻辑 #

你当前的resetForm方法只有传入form参数时才会初始化表单数据，ngOnInit调用时没有传参，导致初始表单数据未正确初始化，修改为：

resetForm(form?:NgForm) {
  if(form!= null) {
    form.resetForm();
  }
  // 把重置formData的逻辑移到if外面，不管有没有传form都初始化
  this.service.formData = {
    id:'',
    matricule:'',
    nom:'',
    prenom:'',
    age:0,
    Quartier:''
  }
}

3.2 给Firestore插入操作添加错误捕获 #

add方法是异步Promise操作，你当前没有添加错误处理，就算请求失败也不会在控制台打印错误，修改onSubmit方法：

async onSubmit(form:NgForm)  {
  let data = form.value;
  try {
    const res = await this.firestore.collection('students').add(data);
    console.log('插入成功，文档ID：', res.id);
    this.resetForm(form);
  } catch (err) {
    console.error('插入失败，错误信息：', err);
  }
}

修改后提交表单，打开浏览器控制台就能看到具体的失败原因。

4. 版本兼容检查 #

Angular 12对应兼容的@angular/fire版本为6.x/7.x，如果你安装的是更高版本的@angular/fire，会出现兼容问题导致静默失败，可执行以下命令安装匹配版本：

npm uninstall @angular/fire
npm install @angular/fire@7.4.1

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