React.forwardRef()引用参数类型推断失效及ref.current异常问题

一、ref.current编译报错但运行时存在的问题 #

1. 检查类型定义：确保FilterElement是你要暴露的属性/方法集合，父组件中filterRef的类型应为React.RefObject<FilterElement>，而非直接使用FilterElement。
2. 存在性检查或非空断言：React组件挂载前ref.current可能为null，访问前可先判断存在性；若确定组件已挂载，也可使用非空断言!：

   if (filterRef.current) {
     console.log(filterRef.current.filters);
   }
   // 确定已挂载时
   console.log(filterRef.current!.filters);
   

3. 对齐类型匹配：确认useImperativeHandle的返回值类型与FilterElement完全一致，避免类型不兼容引发编译错误。

二、Filter组件内ref.current始终为null的问题 #

核心原因是你在Filter组件内创建的filterRef未绑定任何内容，且父组件预先赋值的ref会被React覆盖，具体解决步骤：

1. 调整Filter组件的useImperativeHandle逻辑 #

无需内部空ref，直接返回要暴露给父组件的对象：

export const Filter = React.forwardRef<FilterElement, FilterProps>((props, ref) => {
  // 组件内部维护filters状态（或根据props处理）
  const [filters, setFilters] = useState(props.initialFilters);

  // 暴露指定属性/方法给外部ref
  useImperativeHandle(ref, () => ({
    filters,
    setFilters: (newFilters) => {
      setFilters(newFilters);
      props.onSetFilters(newFilters); // 同步调用父组件回调
    }
  }), [filters]); // 依赖项包含filters，确保ref能获取最新值

  // ... 组件渲染逻辑
});

2. 修改父组件的ref初始化 #

父组件无需预先赋值ref内容，React会通过useImperativeHandle自动设置current值：

const filterRef = useRef<FilterElement>(null); // 初始化为null即可

return (
  <>
    <Filter ref={filterRef} />
    <FilterContext.Provider value={{ ref: filterRef }}>
      <Outlet />
    </FilterContext.Provider>
  </>
);

组件挂载后，filterRef.current会被设置为useImperativeHandle返回的对象，即可正常访问。

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