Angular使用bs-stepper时报'Element | null'无法分配给'Element'错误

TypeScript 对 document.querySelector 方法的返回值定义为 Element | null 类型（如果页面中找不到对应选择器的元素就会返回null），而 bs-stepper 的 Stepper 构造函数要求必须传入非空的 Element 类型参数，因此触发类型校验报错。

下面提供三种可行方案，按推荐度从高到低排序：

• 方案1：使用Angular官方推荐的@ViewChild获取DOM引用（最符合Angular开发规范）
  首先在组件模板中给stepper元素加模板引用变量：

  <!-- 你的组件html文件 -->
  <div #stepper1 id="stepper1" class="bs-stepper">
    <!-- stepper 内容 -->
  </div>
  

  然后修改component.ts代码：

  import Stepper from 'bs-stepper'
  import { ViewChild, ElementRef, OnInit } from '@angular/core'
  export class RegistreComponent implements OnInit {
    private stepper!: Stepper;
    // 用ViewChild获取元素引用，static设为true保证ngOnInit时就能拿到
    @ViewChild('stepper1', { static: true }) stepperEl!: ElementRef<Element>;
  
    next() {
      this.stepper.next();
    }
    onSubmit() {
      return false;
    }
  
    ngOnInit(): void {
      this.stepper = new Stepper(this.stepperEl.nativeElement, {
        linear: false,
        animation: true
      })
    }
  }
  

• 方案2：加非空断言（简单快捷，适合确定模板中一定存在对应id元素的场景）
  直接在document.querySelector后加!，告诉TypeScript该表达式一定不会返回null：

  ngOnInit(): void {
    this.stepper = new Stepper(document.querySelector('#stepper1')!, {
      linear: false,
      animation: true
    })
  }
  

• 方案3：增加非空判断（更安全，避免运行时找不到元素报错）
  先判断是否拿到元素再初始化Stepper：

  ngOnInit(): void {
    const stepperEl = document.querySelector('#stepper1')
    if (stepperEl) {
      this.stepper = new Stepper(stepperEl, {
        linear: false,
        animation: true
      })
    }
  }
  

内容的提问来源于stack exchange，提问作者Souhir