React+TypeScript项目使用Swiper遇spaceBetween属性不存在报错

问题分析 #

你遇到的类型错误源于Swiper v7+版本的React组件API变更——旧版本中直接将spaceBetween、slidesPerView这类配置作为组件props传递的写法不再被支持，这些属性不存在于新版本的SwiperProps类型定义中。

解决方案 #

方案1：适配Swiper v7+的写法（推荐） #

将所有配置项封装到options对象中，作为Swiper组件的属性传入：

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

function CustomSwipper() {
  const swiperConfig = {
    spaceBetween: 50,
    slidesPerView: 3
  };

  return (
    <Swiper options={swiperConfig}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
}

export default CustomSwipper;

方案2：降级到Swiper v6版本 #

如果你更习惯旧写法，可以降级到仍支持直接传配置props的v6版本：

npm install swiper@6.x --save

额外注意事项 #

• Swiper v7+自带TypeScript类型定义，无需额外安装@types/swiper，如果之前装了冲突的类型包，建议卸载：

  npm uninstall @types/swiper
  

• 若使用Swiper v8+，部分配置也支持直接作为props传递，但使用options对象的写法兼容性更好，能避免类型校验报错。

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