TS报错：值被当作类型使用，React父子组件传参遇类型问题

问题根源 #

1. albumList.tsx中的AlbumData接口未导出，导致album.tsx无法正确获取该类型定义
2. album.tsx错误地导入了albumList.tsx的默认导出（即AlbumList组件），并将其当作类型AlbumData使用——组件是运行时的值，不能作为类型使用，这直接触发了TS错误

修复步骤 #

1. 导出albumList.tsx中的AlbumData接口

修改albumList.tsx的接口定义，添加export关键字：

export interface AlbumData {
  album_image: string;
  album_name: string;
  band_name: string;
  genre: string;
  status: string;
  year_listened: string;
}

2. 修正album.tsx的类型导入

将原来导入默认组件的代码，改成导入导出的AlbumData接口：

// 替换原来的 import AlbumData from "./albumList";
import { AlbumData } from "./albumList";

3. 补充albumList.tsx的缺失导入（必要操作）

你的albumList.tsx代码中缺少几个关键导入，需要补充完整：

import { useState, useEffect } from "react";
import axios from "axios";
import Album from "./album"; // 导入Album组件才能在JSX中使用

验证修复 #

完成以上修改后，TS错误会消失，albumList.tsx可以正常将data传递给Album组件，类型检查也能正常工作。

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