如何修复TypeScript错误：useRef传参时类型无'current'属性？

问题根源 #

你给ChatInputBar的scroll参数定义了HTMLDivElement类型，但父组件传的是useRef创建的Ref对象（不是DOM元素本身）。TypeScript把这个参数误识别成了DOM元素的scroll方法（HTMLDivElement自带scroll方法），所以会提示找不到current属性。

修正方案 #

把子组件的参数类型改成{ scroll: React.RefObject<HTMLDivElement> }，同时建议判断current是否存在，避免空值报错：

import React from 'react';

export const ChatInputBar = ({ scroll }: { scroll: React.RefObject<HTMLDivElement> }) => {
  const handleSendMessage = async () => {
    if (scroll.current) {
      scroll.current.scrollIntoView({ behavior: "smooth" });
    }
  };

  // 其他组件代码...
  return <div>ChatInputBar</div>;
};

额外说明 #

父组件的代码没有问题，useRef<HTMLDivElement>(null)的类型定义是正确的，只需修正子组件的类型声明即可解决报错。

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