使用TypeScript实现Swiper双向控制遇类型错误求助

错误原因分析 #

你遇到的两个TS2322错误本质都是类型不匹配：

• 错误1：controller.control 仅接受 Swiper | Swiper[] | undefined，但你的状态初始值是null，TypeScript不允许将null赋值给该属性
• 错误2：onSwiper 回调要求接收Swiper实例作为参数，但你直接传入了未指定类型的setState函数，TypeScript无法推断参数类型

修复方案 #

通过明确状态类型和适配Swiper的类型要求解决问题：

1. 给useState指定Swiper | undefined类型（比null更贴合Swiper的参数要求）
2. 将状态初始值设为undefined，避免null类型冲突
3. 无需额外类型断言，TypeScript能自动匹配onSwiper的回调类型

修复后的完整代码 #

import React, { useState } from 'react';
import { Controller } from "swiper";
import { Swiper, SwiperSlide, Swiper as SwiperInstance } from "swiper/react";

const TestSlider: React.FC = () => {
  // 明确指定状态类型为Swiper实例或undefined，初始值设为undefined
  const [firstSwiper, setFirstSwiper] = useState<SwiperInstance | undefined>(undefined);
  const [secondSwiper, setSecondSwiper] = useState<SwiperInstance | undefined>(undefined);

  return (
    <main>
      <Swiper
        modules={[Controller]}
        onSwiper={setFirstSwiper}
        // 类型完全匹配，无错误
        controller={{ control: secondSwiper }}
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
      </Swiper>

      <Swiper
        modules={[Controller]}
        onSwiper={setSecondSwiper}
        // 类型匹配，无错误
        controller={{ control: firstSwiper }}
      >
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
      </Swiper>
    </main>
  );
}
export default TestSlider;

备选方案（保留null初始值） #

如果你坚持用null作为初始值，需要通过nullish运算符将null转换为undefined：

// 状态定义
const [firstSwiper, setFirstSwiper] = useState<SwiperInstance | null>(null);
// controller属性转换类型
controller={{ control: secondSwiper ?? undefined }}

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