React/TS未正确识别声明类型 类型{}不可赋值为()=>void报错

• 函数组件参数接收规则错误：React函数组件的入参永远是所有传入属性组成的props对象，你当前写法(onAddTodo: ()=>void)是把整个props对象的类型标注为无返回值函数，TS会认为这个组件不接收任何键值对形式的属性，自然会报onAddTodo属性不存在的错误。
• 展开运算符使用错误：JSX里的{...xxx}语法要求xxx是可枚举的普通对象，会把对象的键值对展开为组件的属性。你直接展开newTodoCard这个函数本身，函数不是存属性的普通对象，自然无法展开，这就是第一处报错的来源。网上提到的展开写法修复是针对「把待传属性整理成一个对象后统一展开」的场景，不是让你直接展开函数值。

你不想单独定义完整Interface完全可以实现，不需要额外写type/interface声明，直接在组件参数位置做解构+内联类型标注即可：

修正Sidebar组件 #

import React from 'react'
import TitleCards from './TitleCards'
import SidebarHeader from './SidebarHeader'

// 解构props对象，内联标注类型，无需单独定义Interface
const Sidebar = ({ onAddTodo }: { onAddTodo: () => void }) => {
  return (
    <div className="sidebar">
        {/* 向下传递时直接传属性即可，不要直接展开函数值 */}
        <SidebarHeader onAddTodo={onAddTodo}/>
        <TitleCards/>
    </div>
  )
}

export default Sidebar

修正App组件的传参方式 #

去掉错误的函数展开写法，直接按属性名传递即可：

// 其余逻辑保持不变，仅修改Sidebar组件的调用
<Sidebar onAddTodo={newTodoCard}/>

额外逻辑提醒：你当前newTodoCard函数内直接给普通变量currentTodoCard重新赋值的写法不会触发组件重渲染，下游的TodoCard组件拿不到更新后的值。如果要同步更新视图，需要调用你已经定义的setTodoCards方法修改state，不要直接修改组件内的普通变量。

内容的提问来源于stack exchange，提问作者oscar-lauth