React TypeScript报错：data属性不存在于IntrinsicAttributes & IProps类型

错误核心原因 #

• 传递给InfoQuiz组件的data属性，未在该组件的Props接口中定义，TypeScript无法识别这个属性。
• useState(null)未指定类型，TypeScript自动推断quizData的类型为never，导致传递时类型不匹配。

具体修复步骤 #

1. 给InfoQuiz组件补充data属性的类型定义 #

在InfoQuiz.tsx文件中，修改或补充组件的Props接口：

// InfoQuiz.tsx
// 推荐：定义具体的数据结构
interface IInfoQuizProps {
  data: {
    id: string;
    quizTitle: string;
    score?: number;
    // 根据实际接口返回字段补充
  };
}

// 若暂时不确定数据结构，可用unknown过渡
// interface IInfoQuizProps {
//   data: unknown;
// }

export function InfoQuiz({ data }: IInfoQuizProps) {
  // 组件原有逻辑
}

2. 给useState指定明确类型 #

在UserQuizData组件中，为quizData指定类型，避免never类型推断：

// UserQuizData.tsx
// 先定义接口返回数据的类型（推荐）
interface QuizData {
  id: string;
  quizTitle: string;
  // 对应实际返回的字段
}

export default function UserQuizData({ id }: IProps) {
  const { user } = useUser();
  // 指定状态类型为 QuizData | null
  const [quizData, setQuizData] = useState<QuizData | null>(null);

  // 原有useEffect逻辑保持不变

  return <> {quizData && <InfoQuiz data={quizData} />} </>;
}

若需快速临时解决，也可使用any（不推荐长期使用）：

const [quizData, setQuizData] = useState<any | null>(null);

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