Angular中ViewChild可能为undefined引发的类型不兼容问题求助

你好呀！我来帮你梳理一下这个类型报错的问题～

首先你遇到的错误提示是：

Type 'TeamIn | null | undefined' is not assignable to type 'TeamIn | null'.
Type 'undefined' is not assignable to type 'TeamIn | null'.

从你的描述来看，问题出在父组件通过ViewChild获取子组件的方式上：

@ViewChild(TeamInfoFormComponent) TeamForm?: TeamInfoFormComponent

因为你给TeamForm加了可选标记?，TypeScript就认为它的类型是TeamInfoFormComponent | undefined。当你点击父组件的函数去获取子组件里的数据时，这个数据的类型就会带上undefined的可能性（比如调用子组件方法时，如果TeamForm是undefined，结果就是undefined），但你要赋值的目标类型只接受TeamIn | null，不允许undefined，所以就报了类型不兼容的错误。

给你几个实用的解决办法：

• 先判断组件存在再操作（最安全）
  在获取数据前先确认TeamForm不是undefined，TypeScript会自动做类型收窄，排除undefined的可能性：

  // 假设你从子组件获取数据的方法叫getTeamData
  if (this.TeamForm) {
    const teamData: TeamIn | null = this.TeamForm.getTeamData();
    // 在这里处理teamData就不会有类型问题啦
  }
  

• 使用非空断言（需确保组件必存在）
  如果你能确定TeamInfoFormComponent在模板里一定会渲染（没有被*ngIf这类指令控制隐藏），可以把可选标记?换成非空断言!，强制告诉TypeScript这个组件不会是undefined：

  @ViewChild(TeamInfoFormComponent) TeamForm!: TeamInfoFormComponent;
  

  这样之后获取数据时，类型就不会包含undefined了，但要注意如果组件实际可能不存在，用这个方法会导致运行时错误，一定要谨慎使用。

• 调整接收类型允许undefined
  如果业务逻辑中确实存在数据为undefined的情况，那可以直接修改接收变量的类型，允许undefined：

  const teamData: TeamIn | null | undefined = this.TeamForm?.getTeamData();
  

备注：内容来源于stack exchange，提问作者Omar