angular - ไม่สามารถอ่านคุณสมบัติ "payload" ของ undefined ได้

ฉันรันโปรเจกต์ Angular 8 ของฉัน แล้วเกิดข้อผิดพลาด TypeError: Cannot read property 'payload' of undefined นี่คือโค้ด gallery.html ของฉัน

<div class="img-fluid">
<ul *ngFor="let item of imageList" class="collection">
<div class="col-md-3">
  <mdb-card cascade="true" narrower="true">

  <!--Card image-->
  <div class="view overlay waves-light" mdbWavesEffect>
    <mdb-card-img [src]="item.url" class="card-img h-100"></mdb-card-img>
    <a>
      <div class="mask rgba-white-slight"></div>
    </a>

  </div>

  <!--/.Card image-->

  <!--Button-->
  <a mdbBtn floating="true" class="btn-action ml-auto mr-4 mdb-color lighten-3 waves-light" mdbWavesEffect>
    <mdb-icon fas icon="chevron-right" class="pl-1 waves-light" mdbWavesEffect></mdb-icon>
  </a>

  <!--Card content-->
  <mdb-card-body>

    <!--Title-->
    <mdb-card-title>
      <h4><strong >{{item.name}}</strong></h4>
    </mdb-card-title>
    <a class="activator px-3 mr-2">
      <mdb-icon fas icon="share-alt"></mdb-icon>
    </a>

    <hr>
    <!--Text-->
    <p class="font-small grey-dark-text mb-0">Category: <strong >{{item.cat}} </strong> </p>
    <a href="{{item.url}}" class="waves-light">
      <h5 class="waves-light" mdbWavesEffect>Download
        <mdb-icon fas icon="chevron-right" class="waves-light" mdbWavesEffect></mdb-icon>
      </h5>
    </a>
    <button class="btn btn-success" (click)="deleteimage(item)"> Delete</button>
  </mdb-card-body>
</div>

นี่คือไฟล์ gallery.component.ts ของฉัน

deleteimage(data) {
  this.upSvc.deleteimages(data);
}

นี่คือไฟล์ service.ts ของฉัน

deleteimages(downloadUrl) {
      return this.cf.collection(downloadUrl).doc(this.data.payload.doc.id).delete();
   }

ฉันจะแก้ปัญหานี้อย่างไร?