React(TypeScript)中Framer Motion循环动画repeatType报错求助

问题原因 #

TypeScript 默认会将 'loop' 这类字符串字面量推断为宽泛的 string 类型，但 Framer Motion 的 repeatType 参数要求的是字面量联合类型："loop" | "reverse" | "mirror" | undefined。类型不匹配导致了这个报错。

解决方案 #

有两种简单的修复方式：

方式一：使用 as const 断言锁定字面量类型 #

通过断言让 TypeScript 识别字符串为具体的字面量类型，而非通用 string：

const loadingCircleTransition = {
  duration: 0.8,
  repeat: Infinity,
  repeatType: 'loop' as const,
  ease: 'easeInOut' as const,
};

或者直接断言整个对象为只读字面量类型：

const loadingCircleTransition = {
  duration: 0.8,
  repeat: Infinity,
  repeatType: 'loop',
  ease: 'easeInOut',
} as const;

方式二：显式指定 Transition 类型 #

导入 Framer Motion 的 Transition 类型并直接标注给配置对象：

import type { Transition } from "framer-motion";

const loadingCircleTransition: Transition = {
  duration: 0.8,
  repeat: Infinity,
  repeatType: 'loop',
  ease: 'easeInOut',
};

两种方式都能让 TypeScript 正确识别 repeatType 的类型，消除报错。

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