已在接口定义genre_name，仍报类型string不存在该属性的TS错误

问题根源 #

你的代码存在类型定义不匹配+重复定义冲突的问题：

• 在Model.ts中，Detail接口的genre_list被定义为string[]（字符串数组），但在Detail.tsx的map循环里，你把数组元素genre的类型标注为Detail——TypeScript会认为每个元素是Detail对象，但实际它只是字符串，自然找不到genre_name属性。
• Detail.tsx里还重复定义了一个和Model.ts同名的Detail接口，这会进一步造成类型混淆。

修复步骤 #

1. 删除重复的接口定义 #

直接移除Detail.tsx里这段无效的接口代码：

interface Detail {
  genre: Detail;
}

然后在文件顶部导入Model.ts中正确的Detail接口：

import { Detail } from './Model'; // 路径根据你的项目结构调整

2. 修正类型与循环逻辑 #

根据你的实际需求，二选一调整：

• 如果genre_list确实是字符串数组（比如存的就是分类名称）：直接用字符串类型循环，无需访问genre_name

  <div className="font-mono flex flex-wrap py-2 gap-1">
    {data?.genre_list.map((genre: string, key: number) => (
      <p key={key}>{genre} ,</p>
    ))}
  </div>
  

• 如果genre_list应该是对象数组（每个元素包含genre_name）：修改Model.ts里的接口定义，确保类型和数据结构匹配

  // Model.ts
  export interface Genre {
    genre_name: string;
  }
  
  export interface Detail {
    author: string;
    chapter: string[];
    genre_list: Genre[]; // 改为对象数组类型
    status: string;
    synopsis: string;
    thumb: string;
    title: string;
    type: string;
  }
  

  同时确保后端返回的genre_list是对应的对象结构，之后循环就能正常访问genre.genre_name。

额外提示 #

• 不要在多个文件中重复定义同名接口，统一从模型文件导入，避免类型冲突。
• 始终保证TypeScript类型和后端返回的数据结构完全一致，这是避免这类类型错误的核心。

内容的提问来源于stack exchange，提问作者Alvitto Aprilian Gumay