Framer Motion中repeatType属性引发TypeScript类型错误求助

在Next.js+TypeScript项目里，给Framer Motion的variants过渡属性加repeatType触发类型错误，核心原因是TypeScript自动推断的类型和Framer Motion内部定义的类型不匹配，以下是可行的解决办法：

方法一：显式指定Variants类型 #

导入Framer Motion的Variants类型，把你的变体对象标注为该类型，让TypeScript正确识别结构：

import { motion, Variants } from "framer-motion";

const ScrollPrompt = () => {
    // 显式指定variant为Variants类型
    const variant: Variants = {
        animate: {
            y: [0, 42],
            opacity: [0, 1],
            scale: [0.8, 1],
            transition: {
                duration: 1,
                repeat: Infinity,
                ease: "easeInOut",
                repeatType: "mirror",
            },
        },
    };
    
    return (
        <Container>
            <motion.div variants={variant} animate="animate" />
        </Container>
    );
};

方法二：单独指定Transition类型 #

如果方法一没解决，可以给过渡配置单独指定Transition类型，进一步明确类型结构：

import { motion, Variants, Transition } from "framer-motion";

const ScrollPrompt = () => {
    // 给transition单独指定类型
    const transitionConfig: Transition = {
        duration: 1,
        repeat: Infinity,
        ease: "easeInOut",
        repeatType: "mirror",
    };

    const variant: Variants = {
        animate: {
            y: [0, 42],
            opacity: [0, 1],
            scale: [0.8, 1],
            transition: transitionConfig,
        },
    };
    
    return (
        <Container>
            <motion.div variants={variant} animate="animate" />
        </Container>
    );
};

这两种方法都是通过显式类型声明，让TypeScript匹配Framer Motion的内部类型定义，从而消除错误。

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