使用Framer Motion时TypeScript提示‘offset不在UseScrollOptions’的问题

可能的原因及解决步骤： #

1. 清理依赖缓存与lock文件
   依赖缓存或lock文件版本不匹配常导致这类问题，执行以下操作：

   • 删除项目根目录的node_modules文件夹
   • 删除package-lock.json（用yarn/pnpm的话对应删除yarn.lock/pnpm-lock.yaml）
   • 重新执行npm install（或yarn install/pnpm install）

2. 检查TS配置的模块解析方式
   NextJS 13推荐使用bundler作为moduleResolution，确保你的tsconfig.json中compilerOptions包含：

   "moduleResolution": "bundler"
   

   修改后重启TS服务器（VSCode可按Ctrl+Shift+P输入TypeScript: Restart TS Server）。

3. 确认useScroll的导入路径
   必须从framer-motion直接导入，避免第三方或自定义导出：

   import { useScroll } from "framer-motion";
   

4. 临时绕过TS检查（紧急场景）
   若以上方法无效，可通过类型断言临时解决，不影响动画功能：

   const { scrollYProgress } = useScroll({
     target: targetRef,
     container: containerRef,
     offset: ['start end', 'end end'],
   } as unknown as Parameters<typeof useScroll>[0]);
   

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