React滑块开发遇TS2532错误：object is possibly 'undefined'

问题根源 #

你遇到的TS2532错误，本质是useRef默认初始值为undefined，TypeScript无法确定carousel.current是否已绑定DOM元素；另外你的JSX里存在拼写错误——把ref写成了red，这会导致ref永远获取不到DOM节点，直接加剧了这个问题。

解决方案 #

1. 修正ref绑定的拼写错误

先把JSX中的red={carousel}改成ref={carousel}，确保ref能正确关联到DOM元素：

<motion.div ref={carousel} className="carusel" whileTap={{cursor: "grabbing"}} >

2. 给useRef指定类型并处理空值

有两种常用方式处理TypeScript的空值校验：

方式一：非空断言（简单直接）

给useRef指定DOM元素类型，并用!断言current非空（适用于确定组件渲染后ref一定会被赋值的场景）：

import React, { useRef, useEffect, useState } from "react";
import { motion } from "framer-motion";
import images from "../images";

function Sliders() {
  const [width, setWidth] = useState(0);
  // 指定ref类型为HTMLDivElement，初始值设为null
  const carousel = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // 用!断言current非空
    setWidth(carousel.current!.scrollWidth - carousel.current!.offsetWidth);
  }, []);

  // 其余代码保持不变...
}

方式二：空值检查（更安全）

添加条件判断，确保current存在后再执行逻辑，避免潜在的运行时错误：

useEffect(() => {
  if (carousel.current) {
    setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth);
  }
}, []);

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