React.useRef报错：无法赋值只读属性'current'问题排查

1. 传入的ref类型不匹配：如果你的组件props将apiRef定义为React.Ref<Api>，它会包含只读的RefObject<T>、可变的MutableRefObject<T>和函数式ref三种类型。当传入的是只读RefObject时，useImperativeHandle尝试修改其current属性就会触发“无法赋值给只读属性”的报错。
2. useImperativeHandle依赖项错误：你当前依赖的是apiRef（useRef返回的稳定对象），这会导致useImperativeHandle仅执行一次，后续内部API更新时外部ref无法同步最新状态。

1. 明确约束apiRef的props类型 #

将组件props中的apiRef类型限定为React.MutableRefObject<Api> | undefined，避免传入只读RefObject或函数式ref：

interface ComponentProps {
  apiRef?: React.MutableRefObject<Api>;
  // 其他props...
}

2. 修正useImperativeHandle的依赖项 #

将依赖项从[apiRef]改为[apiRef.current]，确保内部API更新时，外部ref能同步最新的API对象：

const useFilterBuilderApiInitialization = (inputApiRef: React.MutableRefObject<Api> | undefined) => {
  const apiRef = useRef() as React.MutableRefObject<Api>;
  
  // 初始化API对象，避免覆盖已有属性
  if (apiRef.current === undefined) {
    apiRef.current = {};
  }

  // 修正依赖项为apiRef.current
  useImperativeHandle(inputApiRef, () => apiRef.current, [apiRef.current]);

  return apiRef;
}

3. 确保父组件传入正确的MutableRefObject #

父组件中保持使用useRef创建ref，并确保类型断言正确：

const apiRef = useRef<Api>({}) as React.MutableRefObject<Api>;

// 渲染组件时传入
return <Component apiRef={apiRef} />;

4. 可选：用Object.assign初始化API方法（参考MUI实现） #

如果需要逐步添加API方法，建议用Object.assign避免覆盖已有属性，保持API对象的稳定性：

if (apiRef.current.getFilterValue === undefined) {
  Object.assign(apiRef.current, {
    getFilterValue: () => {/* 实现逻辑 */},
    setFilterValue: (value) => {/* 实现逻辑 */}
    // 其他API方法...
  });
}

这样修改后，既可以保证外部能正确访问组件内部的API方法，也能避免只读属性的赋值报错。

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