TypeScript报错：找不到名称'user'，请协助排查原因

我搞不懂为啥会出这个错，其他组件都跑的好好的，一点问题没有。怀疑是不是TypeScript接口的问题？

相关代码 #

Details.tsx #

import React, { FC } from "react";
import App from "../App";
import { IDetails } from "../types/Types";
import { BiBookmark } from "react-icons/bi";
import { BiShareAlt } from "react-icons/bi";

interface DetailsProps {
  user: IDetails;
}

const Details: FC<DetailsProps> = ({user}) => {
  return (
    <>
      <div>
        <article className="description">
          <header className="header">
            <span style={{ margin: "1rem" }}> Job Details</span>
            <span style={{ margin: "18rem" }}>
              <BiBookmark />
              Save to my list
            </span>

            <span style={{ margin: "-12rem" }}>
              <BiShareAlt />
              Share
            </span>
          </header>
          <div className="span">-</div>
          <div className="Apply_now">APPLY NOW</div>
          <div>{user.title}</div>
        </article>
      </div>
    </>
  );
};

export default Details;

Types.tsx #

export interface IDetails {
  name: string;
  title: string;
  headers: string;
  id: number;
  email: string;
  address: string | number;
  pictures: string[];
  updatedAt: string | number;
}

相关截图说明 #

• 错误截图：提示Details组件接收的user属性类型不符合预期
• App.tsx截图：展示了Details组件在App中的调用代码
• 正常组件截图：其他使用IDetails接口的组件运行无异常

排查方向 #

从代码看IDetails接口定义没问题，问题大概率出在App.tsx传递给Details的参数上：

• 检查App里传给Details的user变量，是否完全符合IDetails的所有字段要求，有没有缺属性、类型不匹配的情况（比如updatedAt传了布尔值，pictures不是数组）
• 确认App里有没有正确导入IDetails，会不会和其他类似接口搞混了
• 如果user是从接口拿的数据，核对返回的JSON结构，比如字段名是不是大小写不一致（比如接口返回Title而不是title）
• 临时测试可以给user加可选链{user?.title}，或者把DetailsProps里的user设为可选user?: IDetails，但这只是临时方案，核心还是要保证传入的参数严格匹配接口定义

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