编辑2

为了让Filter自己管理一个单独的状态，也可以执行以下操作：

export const Filter = React.forwardRef<FilterElement | undefined, FilterProps>((props, ref) => {
  const [filters, setFilters] = useState<FilterItem[]>([]);
  const refInstance: FilterElement = useMemo(() => {
    return {
      filters,
      setFilters,
    };
  }, [filters]);
  useImperativeHandle(ref, () => refInstance, [refInstance]);
  // ...
}

字符串

编辑：

根据更新的代码，我认为你根本不需要ref，因为你可以将filters和setFilters传递给Filter组件和FilterContext提供程序：

<Filter filters={ filters } setFilters={ onSetFilters } />
<FilterContext.Provider value={{ filters, setFilters: onSetFilters }}>
  <Outlet />
</FilterContext.Provider>

型
在任何情况下，如果你想这样做，你不需要使用forwardRef，只要命名你的 prop 别的东西，并输入RefObject：

const App = () => {
  const filterRef = useRef<FilterElement>({ filters, setFilters: onSetFilters });
  return (
    <>
      <Filter filterRef={filterRef} />
      <FilterContext.Provider value={{ ref: filterRef }}>
        <Outlet />
      </FilterContext.Provider>
    </>
  );
} 
export interface FilterProps {
  filterRef: RefObject<FilterElement>;
}
export const Filter: React.FC<FilterProps> = ({ filterRef }) => {
  console.log('filter', filterRef);
  // ...
}

型
如果您想在Filter组件中使用ref，但又想将相同的ref暴露给父组件，则可以使用下面的useImperativeHandler答案。

原始答案：

Refs可以是一个带有current属性的对象，就像useRef返回的对象一样，也可以是一个ref回调函数，所以编译器是正确的。
您应该在Filter组件中创建一个新的ref，并使用useImperativeHandle将其与转发的组件同步：

export const Filter = forwardRef<FilterRef, FilterProps>((props, ref) => {
  const filterRef = useRef(null);
  useImperativeHandle(ref, () => filterRef.current!, []);
  ...
});

型