TS2322报错：属性'worker'不存在于IntrinsicAttributes类型的修复方法

报错信息 #

TS2322: 类型 '{ key: any; worker: any; }' 无法赋值给类型 'IntrinsicAttributes'，属性 'worker' 不存在于类型 'IntrinsicAttributes' 上。

报错原因 #

TypeScript在做组件属性类型校验时，检测到你向UserManagerComponent子组件传入了worker属性，但该组件的Props类型定义中没有声明接收worker字段，因此抛出类型不匹配错误。全链路使用any类型绕过校验、组件类型定义缺失是这类问题的核心诱因。

修复步骤 #

• 先定义业务数据类型，替换全链路的any
  先对齐Redux中存储的workers数据结构，定义明确的Worker类型：

  // 按实际接口返回的字段补全类型定义即可
  interface Worker {
    idUser: number | string;
    fullName: string;
    role: string;
    projectIds?: Array<number | string>;
  }
  

  同步确认RootState类型中state.taskContent.workers的类型为Worker[]，从数据源层面保证类型正确。

• 给UserManagerComponent声明明确的Props类型
  函数组件可直接通过参数标注或FC泛型绑定Props类型：

  import type { FC } from 'react';
  
  // 声明组件接收的属性类型
  interface UserManagerComponentProps {
    worker: Worker;
  }
  
  // 给组件绑定Props类型
  const UserManagerComponent: FC<UserManagerComponentProps> = ({ worker }) => {
    // 组件内部逻辑，此时worker会有完整的类型提示
    return (
      <Tr>
        <Td>{worker.fullName}</Td>
        <Td>{worker.role}</Td>
        {/* 其余表格单元格内容 */}
      </Tr>
    )
  };
  
  export default UserManagerComponent;
  

• 优化父组件代码，移除不必要的any标注
  修正后父组件代码如下，同时补全示例代码中缺失的闭合标签、useEffect依赖项：

  const UserManegmentList = () => {
    // useSelector会自动根据RootState推导workers的类型，无需手动标注any
    const { workers } = useSelector((state: RootState) => state.taskContent);
    const { projects } = useSelector((state: RootState) => state.projects);
    const dispatch = useDispatch();
  
    useEffect(() => {
      dispatch(getAllWorkers());
    }, [dispatch]);
  
    return (
      <>
        <Table>
          <Thead>
            <Tr>
              <Tdhead>Full name</Tdhead>
              <Tdhead>Role</Tdhead>
              <Tdhead>Projects</Tdhead>
              <Tdhead>actions</Tdhead>
            </Tr>
          </Thead>
          <tbody>
            {workers.map((worker) => (
              <UserManagerComponent key={worker.idUser} worker={worker}/>
            ))}
          </tbody>
        </Table>
      </>
    )
  };
  

常见避坑点 #

• 检查UserManagerComponent的导入路径是否正确，若误导入其他同名无Props组件，也会触发同类报错
• 不要为了快速消错给组件Props设置Record<string, any>，会完全丢失TS的类型校验能力，后续传错属性、写错字段名不会有任何提示
• 若组件是动态加载的，确认模块导出方式正确，避免出现导入值为undefined引发的类型异常

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