无法从Angular FireStore中删除用户

Question

在这个小程序测试中，我可以从AngularStore写入和获取数据。但是我无法删除：Cannot read property 'id' of undefined是按下删除按钮时得到的日志。我不明白为什么，代码和逻辑似乎还可以...有人可以推我吗？

HTML：

      <button class="btn btn-danger" (click)="deleteUser()">Delete</button>

    <div *ngFor="let user of users | async">
      <li><p>{{user.name}}</p></li>
      <li><h3>{{user.recipe}}</h3></li>
    </div>

TS组件

    export class MainComponent {

      private itemsCollection: AngularFirestoreCollection<Users>;
      users: Observable<Users[]>;
      constructor(private afs: AngularFirestore, private usersService:UsersService) {
        this.itemsCollection = afs.collection<Users>('recipes');
        this.users = this.itemsCollection.valueChanges();
      }

      deleteUser(user:Users){
        this.usersService.deleteUser(user);
      }

Service.TS

  constructor(private afs: AngularFirestore) {
    this.usersCollection = afs.collection<Users>('recipes');
    this.users = this.usersCollection.valueChanges();
     }

  deleteUser(user:Users) {


    this.userDoc = this.afs.doc(`recipes/${user.id}`); -> the error comes from here
    this.userDoc.delete();

  }

TS型：

export interface Users {
  id:number,
  name:string,
  recipe: string
}

为什么无法识别ID？