React TypeScript使用Props报错：类型被当作值使用

TypeScript 中通过 type 关键字声明的结构是静态类型标注，仅在编译阶段做类型合法性校验，编译为可运行的 JavaScript 代码时会被完全擦除，不会生成任何对应的运行时值。
你的代码中 switch (WidgetProps.mytype) 这一行将 WidgetProps 作为实际存在的对象读取属性，违反了类型的使用规则，因此 TS 抛出“仅作为类型存在，却被当作值使用”的错误。
另外逻辑本身也存在偏差：你需要判断的是组件实际接收到的入参里的 mytype 字段，而非类型本身。

将 switch 语句的判断目标改为组件实际接收到的 props 对象上的 mytype 属性即可，修正后的 widget.tsx 代码如下：

// 按你项目实际的图标引入路径调整
import PersonOutlinedIcon from "@mui/icons-material/PersonOutlined";

type WidgetProps = {
  mytype: string;
};
const Widget = (props: WidgetProps) => {
  let data;

  // 错误写法：switch (WidgetProps.mytype)
  // 正确写法：读取实际传入的props的mytype字段
  switch (props.mytype) {
    case "user":
      data = {
        title: "USERS",
        isMoney: false,
        link: "See all users",
        icon: <PersonOutlinedIcon className="icon" />,
      };
      break;
    default:
      break;
  }

  // 原代码缺失组件返回的渲染逻辑，补全后才能正常渲染
  return (
    <div className="widgetCard">
      <div className="widgetHeader">
        {data?.icon}
        <span className="widgetTitle">{data?.title}</span>
      </div>
      <span className="widgetLink">{data?.link}</span>
    </div>
  );
};

export default Widget;

额外注意事项 #

• 所有通过 type、interface 声明的 TS 类型，只能用于类型标注场景（比如写在冒号后约束变量、函数参数、返回值的类型），不能出现在赋值、属性读取、函数传参等需要运行时值的位置
• 如果偏好解构写法，可以将组件入参写为 const Widget = ({ mytype }: WidgetProps) => {}，后续直接使用 mytype 变量即可，代码更简洁
• 你在 home.tsx 中调用组件传入 mytype="user" 的写法是正确的，不需要修改。

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