Невозможно удалить пользователя из 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
}

Почему идентификатор не распознан?