TypeScript错误：'{ todo: TodoInterFace; }'类型不兼容问题的解决方法

问题场景 #

我在做一个练手TypeScript的个人项目，一开始直接给数组赋值后todos能正常显示，没有错误。但把包含map的代码抽成单独组件并使用useContext Hook后，出现了TypeScript错误：

Type '{ todo: TodoInterFace; }' is not assignable to type 'IntrinsicAttributes & TodoInterFace'

问题原因 #

错误出在Todo组件的props定义上。React组件的props本质是一个对象，你直接把TodoInterFace作为props类型，相当于要求组件接收TodoInterFace的所有属性作为单独的props（比如<Todo content="..." date="..."/>），但你在TodoDisplay里调用的是<Todo todo={todo}/>——传递的是一个名为todo的属性，这和组件定义的props类型不匹配，所以TS抛出了类型错误。

解决方案 #

给Todo组件定义一个明确的props类型，这个类型包含一个todo字段，类型为TodoInterFace，然后通过解构或者直接访问props对象来使用这个值。

修改后的代码示例 #

Todo.tsx

import { TodoInterFace } from "../interfaces/TodoInterface"
import styles from "../styles/Todo.module.css"

// 定义组件专属的props类型
interface TodoProps {
  todo: TodoInterFace
}

// 解构props并使用正确的类型
function Todo({ todo }: TodoProps) { 
  return (
    <div className={styles.todo}>
          <p>{todo.content}</p> {/* 替换成你TodoInterFace里的实际属性 */}
        <p>{todo.date}</p> {/* 示例，根据你的接口调整 */}
        
        <div className={styles.butttons}>
            <button>Delete</button>
            <button>Complete</button>
        </div>    
    </div>
  )
}

export default Todo

这样修改后，组件明确知道要接收一个名为todo的props，类型和你传递的TodoInterFace对象完全匹配，TypeScript的错误就会消失。

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