向React组件传入memoized函数prop时TypeScript报错如何修复

你代码里有几个核心问题直接触发TS报错：

• useMemo用法错误：useMemo的作用是缓存计算结果值，它接收的第一个参数是无入参的工厂函数，工厂函数的返回值才是useMemo最终返回的缓存值。你直接把带参数的业务回调写在了工厂函数的位置，这个工厂函数执行后没有返回任何内容，所以memodData的实际类型是void，完全不符合prop要求的函数类型，这是报错的直接原因。
• 类型不匹配：你定义的someState类型是string，但子组件回传的参数类型是IData[] | undefined | false，直接把参数传给setSomeState本身也存在类型冲突。
• 选型错误：缓存传给子组件的回调函数应该用专门的useCallback Hook，而不是useMemo。useCallback本身就是缓存函数引用、避免子组件不必要重渲染的官方推荐方案，语义和性能表现都更合适。

基础修复（缓存回调+类型对齐） #

如果你的业务场景就是要存储子组件回传的原始值，先把state类型对齐，再替换成useCallback写缓存回调即可：

// 修正state泛型，和子组件回传参数类型保持一致
const [someState, setSomeState] = useState<IData[] | undefined | false>();

// 用useCallback缓存回调，依赖数组放函数内用到的外部变量即可
// setState函数是React保证引用稳定的，不需要放进依赖数组
const memodLiftableData = useCallback((data: IData[] | undefined | false) => {
  setSomeState(data);
}, []);

<BasicComponent liftableData={memodLiftableData} />

特殊场景：state必须为string类型 #

如果someState确实需要是字符串类型，在回调里把回传值做类型转换再赋值即可：

const [someState, setSomeState] = useState<string>('');

const memodLiftableData = useCallback((data: IData[] | undefined | false) => {
  // 按业务逻辑做值转换，例：空值设为空字符串，有值时序列化存储
  if (!data) {
    setSomeState('');
    return;
  }
  setSomeState(JSON.stringify(data));
}, []);

不推荐的等价写法：如果你非要用useMemo实现，需要在工厂函数内部把要传递的回调return出去，本质和useCallback效果一致，但语义差很多，不建议这么写：

const memodLiftableData = useMemo(() => {
  return (data: IData[] | undefined | false) => {
    setSomeState(data);
  }
}, []);

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