Ionic7+React18中获取Swiper引用实现按钮切换幻灯片报错解决

问题根源 #

你遇到的Property 'getSwiper' does not exist on type 'never'错误有两个核心原因：

• useRef未指定正确的类型，TypeScript将其推断为never类型
• 未将swiperRef绑定到<Swiper>组件上，导致ref.current始终为null

修复步骤 #

1. 导入Swiper核心类型

从Swiper库导入核心类型，为useRef提供类型支持：

import { Swiper } from 'swiper';

2. 修正useRef的类型声明

明确指定useRef的类型为Swiper实例或null：

const swiperRef = useRef<Swiper | null>(null);

3. 将ref绑定到Swiper组件

在<Swiper>标签上添加ref属性，把引用关联到组件实例：

<Swiper ref={swiperRef} {...slideOptions}>
  {/* 幻灯片内容 */}
</Swiper>

4. 简化切换函数

Swiper实例本身就提供了slideNext()方法，无需调用getSwiper()，直接调用即可：

const handleSeeNext = () => {
  swiperRef.current?.slideNext();
};

完整修正后的组件代码 #

import { IonImg } from "@ionic/react";
import React, { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Swiper as SwiperCore } from 'swiper';
import Card from "../types/card.type";

interface CardComponentProps {
  card: Card;
}

const CardComponent: React.FC<CardComponentProps> = ({ card }) => {
  const swiperRef = useRef<SwiperCore | null>(null);
  
  const slideOptions = {
    on: {
      beforeInit(swiper) {
        swiper.params.slidesPerView = 1;
        swiper.params.slidesPerColumn = 1;
        swiper.params.slidesPerGroup = 1;
        swiper.params.watchSlidesProgress = true;
        swiper.params.spaceBetween = 0;
        swiper.params.virtualTranslate = true;

        swiper.classNames.push(`${swiper.params.containerModifierClass}flip`);
        swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
      },
      setTranslate(swiper) {
        const { slides, rtlTranslate: rtl } = swiper;
        slides.forEach((slide) => {
          const $slideEl = swiper.$(slide);
          let progress = slide.progress;

          if (swiper.params.flipEffect.limitRotation) {
            progress = Math.max(Math.min(slide.progress, 1), -1);
          }

          const offset$$1 = slide.swiperSlideOffset;
          const rotate = -180 * progress;
          let rotateY = rotate;
          let rotateX = 0;
          let tx = -offset$$1;
          let ty = 0;

          if (!swiper.isHorizontal()) {
            ty = tx;
            tx = 0;
            rotateX = -rotateY;
            rotateY = 0;
          } else if (rtl) {
            rotateY = -rotateY;
          }

          $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;

          $slideEl.transform(`translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
        });
      },
      setTransition(swiper, duration) {
        const { slides, activeIndex, $wrapperEl } = swiper;

        slides
          .transition(duration)
          .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
          .transition(duration);

        if (swiper.params.virtualTranslate && duration !== 0) {
          let eventTriggered = false;

          slides.eq(activeIndex).transitionEnd(() => {
            if (eventTriggered) return;

            eventTriggered = true;
            swiper.animating = false;
            const triggerEvents = ["webkitTransitionEnd", "transitionend"];

            triggerEvents.forEach((eventName) => {
              $wrapperEl.trigger(eventName);
            });
          });
        }
      },
    },
  };

  const handleSeeNext = () => {
    swiperRef.current?.slideNext();
  };

  const frontImgDataUri = `data:${card.frontImgMimeType};base64,${
    card.frontImgBase64Encoded
  }`;
  const backImgDataUri = `data:${card.backImgMimeType};base64,${
    card.backImgBase64Encoded
  }`;

  return (
    <>
      <Swiper ref={swiperRef} {...slideOptions}>
        <div className="swiper-slide"><IonImg src={frontImgDataUri} alt="Front" /></div>
        <div className="swiper-slide"><IonImg src={backImgDataUri} alt="Back" /></div>
      </Swiper>
      <button onClick={handleSeeNext}>See Next</button>
    </>
  );
};

export default CardComponent;

额外优化建议 #

你手动实现的翻转动画可以替换为Swiper内置的FlipEffect，减少自定义代码：

1. 导入FlipEffect：

import { FlipEffect } from 'swiper/modules';

2. 在slideOptions中启用效果：

const slideOptions = {
  effect: 'flip',
  slidesPerView: 1,
  spaceBetween: 0,
  // 保留其他需要的配置
};

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