在 Ionic 7 和 React 18 中，如何获取对 Swiper 的引用，以便让用户通过单击按钮进行过渡？

问：

我正在使用 Ionic 7、React 18 和 Swiper 10.3.1。我有以下组件可以在两个图像之间切换。当有人单击按钮时，我想对其进行动画处理以进行水平翻转，但是我无法在onClick按钮处理程序中获取对Swiper的引用。我有这个

  const swiperRef = useRef(null);
        ...
  const handleSeeNext = () => {
    if (swiperRef.current) {
      swiperRef.current.getSwiper().slideNext();
    }
  };

但我是编译器告诉我的

Property 'getSwiper' does not exist on type 'never'.ts(2339)

这是完整的组件

import { IonImg } from "@ionic/react";
import React, { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
//import "swiper/css/swiper.css";
import Card from "../types/card.type";
interface CardComponentProps {
  card: Card;
}

const CardComponent: React.FC<CardComponentProps> = ({ card }) => {
  const swiperRef = useRef(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 = () => {
    if (swiperRef.current) {
      swiperRef.current.getSwiper().slideNext();
    }
  };

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

  return (
    <>
    <Swiper {...slideOptions}>
      {/* Your slides go here */}
      <div className="swiper-slide"><IonImg src={frontImgDataUri} alt="Front" /></div>
      <div className="swiper-slide"><IonImg src={backImgDataUri} alt="Back" /></div>
      {/* Add more slides as needed */}
    </Swiper>
    <button onClick={handleSeeNext}>See Next</button>
    </>
  );
};

export default CardComponent;