React forwardRef结合TypeScript使用时访问ref.current报错的原因及解决方案

首先得搞清楚为什么你会遇到这个TypeScript错误：forwardRef接收的ref参数类型是React.Ref<T>，它是**对象式ref（MutableRefObject<T | null>）和回调式ref（(instance: T | null) => void）**的联合类型。回调式ref本身没有current属性，所以直接访问ref.current会触发类型错误。

下面是几种无需类型断言就能安全访问current的正确做法：

1. 直接把ref传递给内部DOM元素（最常用的常规用法） #

这是forwardRef的核心用途——把父组件传递的ref转发给组件内部的DOM元素，React会自动处理两种ref类型（对象或回调），你根本不需要自己手动访问current：

import { forwardRef } from 'react';

interface PropsDummy {}
const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, ref) => {
  // 直接将ref绑定到内部input元素，React会负责赋值
  return <input ref={ref} placeholder="Profile input" />;
});

2. 类型守卫区分ref类型（需内部访问current时） #

如果你确实需要在组件内部访问ref的current，可以通过类型守卫判断ref的类型，TypeScript会自动推断类型，无需断言：

import { forwardRef } from 'react';

interface PropsDummy {}
const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, ref) => {
  // 检查ref是否是对象式ref（包含current属性）
  if (ref && typeof ref === 'object' && 'current' in ref) {
    // 这里TypeScript会自动识别ref为MutableRefObject<HTMLInputElement | null>
    console.log(ref.current);
  }

  // 如果是回调式ref，你可以主动调用它传递DOM实例
  // else if (typeof ref === 'function') {
  //   ref(someDomElement);
  // }

  return <div>Profile Menu Content</div>;
});

3. 使用useImperativeHandle暴露自定义接口（推荐用于暴露组件方法） #

如果你的组件需要向父组件暴露特定的方法或属性（而不是直接暴露整个DOM元素），useImperativeHandle是更规范的做法，同时能完美兼容TypeScript：

import { forwardRef, useImperativeHandle, useRef } from 'react';

interface PropsDummy {}
// 定义组件对外暴露的方法/属性接口
interface ProfileMenuHandle {
  focusInput: () => void;
  getInputValue: () => string | undefined;
}

const ProfileMenu = forwardRef<ProfileMenuHandle, PropsDummy>((props, ref) => {
  // 内部定义自己的ref来管理DOM元素
  const inputRef = useRef<HTMLInputElement>(null);

  // 用useImperativeHandle指定要暴露给父组件的内容
  useImperativeHandle(ref, () => ({
    focusInput: () => {
      inputRef.current?.focus();
    },
    getInputValue: () => {
      return inputRef.current?.value;
    }
  }), []); // 依赖项为空，因为inputRef是稳定的

  // 内部可以安全访问inputRef.current
  console.log(inputRef.current?.value);

  return <input ref={inputRef} placeholder="Profile input" />;
});

为什么不推荐类型断言？ #

你之前用的类型断言ref as React.RefObject<HTMLInputElement>会跳过TypeScript的类型检查，如果父组件传递的是一个回调式ref，运行时访问myRef.current会得到undefined甚至报错，因为回调ref根本没有current属性。类型断言相当于“告诉TypeScript我比你更清楚类型”，但这其实隐藏了潜在的类型安全问题。

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