React+TS报错：Type 'TodoModel'无法赋值给type 'ReactNode'

报错Type 'TodoModel' is not assignable to type 'ReactNode'是因为你将整个TodoModel类型的对象直接传给了Material UI的ListItemText组件的primary属性。该属性仅支持传入可渲染的React节点（字符串、数字、合法JSX等），无法直接渲染自定义TS对象。

找到代码里传参错误的行：

{/* 错误写法：直接传入整个todo对象 */}
<ListItemText style={{ color: "#f1f1ef" }} primary={todo} />

将primary的取值改为TodoModel中存储待办文本内容的具体字段即可，具体字段名和你定义TodoModel类型时的命名保持一致，常见命名为todo/content/text。
举个例子，如果你的TodoModel类型定义如下：

type TodoModel = {
  id: number;
  todo: string; // 存储待办内容的字段
  isCompleted: boolean;
}

那错误行修改为：

{/* 正确写法：传入具体的文本字段 */}
<ListItemText style={{ color: "#f1f1ef" }} primary={todo.todo} />

你当前removeTodo方法内的filter回调参数名和外层props的todo重名，虽然不会触发运行时错误，但会降低代码可读性，建议修改回调参数名避免变量遮蔽：

const removeTodo = (id: number) => {
  // 将回调参数重命名为item，和外层todo区分
  setTodos(todos.filter(item => item.id !== id));
};

修复后类型校验会直接通过，页面也能正常渲染待办内容。

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