Typescript 访问继承接口的属性时在html中出错.角形

我使用的是17号角，我有以下问题:

我有一个IDetail接口，它有一些属性:

export interface IDetails {
  summary: Summary;
  description: string;
}

我还有另一个接口，它继承自IDetail并实现一个特定于它的新属性.

export interface ICertificate extends IDetails {
  url: string;
}

在我的Angular 组件中，我通过INPUT接收此接口的数组:

export class DetailsComponent implements OnInit {
  @Input({required: true}) public inputDetail: Array<IDetails> = [];
}

现在，在html中，当接收到这个数组时，我执行一个for循环，并将url字段传递给子组件

@for (item of inputDetail; track $index) {
    ...
      @defer (on viewport) {
        <app-validation [inputValidation]="**item?.url**"></app-validation>
      } @placeholder {
        <section>
          <h4>Loading...</h4>
        </section>
      } @error {
        <section>
          <h4>Error, Try Again.</h4>
        </section>
      }
}

在我试图传递url属性的这一行上，出现了错误:

类型‘IDetail|ICertifate’上不存在属性‘url’. 类型‘IDetail’上不存在属性‘url’

如何解决此问题并正确访问属性并将其发送给子组件？

我try 将两种类型的值放入这个接收到的属性中.没有成功.

export class DetailsComponent implements OnInit {
  @Input({required: true}) public inputDetail: Array<IDetails> | Array<ICertificate> = [];
}