如何筛选TypeScript接口数组并在React页面正确展示？

问题背景 #

我有一个名为Med的TypeScript接口，包含drugClass、dosage、name等属性，基于该接口创建了药物数组medications，想要按drugClass筛选数组并展示到页面，但渲染时出现类型错误：

Type 'Med' is not assignable to type 'ReactNode'.ts(2322)

相关代码如下：

Medications.ts #

export interface Med {
  dosage: number;
  name: string;
  drugClass: medForm;
  forDog: boolean;
  forCat: boolean;
}

export const medications: Med[] = [
  {
    dosage: 0.03,
    name: "Meloxicam",
    drugClass: "Oral",
    forDog: true,
    forCat: true,
  }, 
  // 更多药物数据...
];

page.tsx #

import { Med, medications } from "./Medications"; 

export default function Home() {
 const filteredOralData = medications.filter(
    (med) => med.drugClass === "Oral"
  );

return (
  <div>
    <ul className="list-group">
      {filteredOralData.map((item) => (
        <li>{item}</li> {/* 此处报错 */}
      ))}
    </ul>
  </div>
);
}

错误原因 #

1. React无法直接渲染对象：<li>的子元素要求是ReactNode类型（字符串、数字、React元素等），但直接传入了Med类型的对象，TypeScript和React都无法识别如何渲染这个对象。
2. 接口类型定义缺失：Med接口中的drugClass使用了medForm类型，但未定义该类型，会导致数组中字符串类型的drugClass值与接口类型不匹配。

修复步骤 #

1. 补充medForm类型定义 #

在Medications.ts中添加medForm的联合类型，明确允许的药物分类值：

export type medForm = "Oral" | "Injectable" | "Topical"; // 根据实际业务扩展取值

export interface Med {
  dosage: number;
  name: string;
  drugClass: medForm;
  forDog: boolean;
  forCat: boolean;
}

2. 渲染对象的具体属性 #

在page.tsx中，不要直接渲染item对象，而是选择Med接口中的具体属性（如name、dosage等）进行展示，同时给列表项添加唯一的key属性（React列表渲染的强制要求）：

import { Med, medications } from "./Medications"; 

export default function Home() {
 const filteredOralData = medications.filter(
    (med) => med.drugClass === "Oral"
  );

return (
  <div>
    <ul className="list-group">
      {filteredOralData.map((item) => (
        <li key={item.name} className="list-group-item">
          <strong>药物名称：</strong>{item.name}<br/>
          <strong>剂量：</strong>{item.dosage}mg<br/>
          <strong>适用宠物：</strong>{item.forDog ? "狗 " : ""}{item.forCat ? "猫" : ""}
        </li>
      ))}
    </ul>
  </div>
);
}

额外说明 #

• key属性必须是列表中唯一的值，这里使用item.name，如果存在重复名称的药物，建议使用接口中定义的唯一ID字段（若有）。
• 可根据需求自定义展示的属性和样式，只要确保渲染的内容属于ReactNode可接受的类型即可。

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