如何高效处理React+NextJS中接口返回的缺失字段JSON对象？

我正在使用React结合NextJS进行Web开发，需在页面渲染列表，列表数据通过axios的get请求从服务器获取。但部分返回的JSON对象存在name、address等字段缺失的情况，目前我使用if-else语句处理不同的JSON对象，代码如下：

getPatientList(currentPage).then((res: any) => {
  console.log("Response in ini: " , res);
  //console.log(res[0].resource.name[0].given[0]);
  const data: any = [];
  res.map((patient: any) => {
    if ("name" in patient.resource) {
      let info = {
        id: patient.resource.id,
        //name:"test",
        name: patient.resource.name[0].given[0],
        birthDate: patient.resource.birthDate,
        gender: patient.resource.gender,
      };
      data.push(info);
    } else {
      let info = {
        id: patient.resource.id,
        name: "Unknow",
        //name: patient.resource.name[0].given[0],
        birthDate: patient.resource.birthDate,
        gender: patient.resource.gender,
      };
    data.push(info);
  }
});

作为TypeScript和React新手，想请教是否有更巧妙高效的解决方案？

1. 用可选链+空值合并简化字段处理 #

直接用?.处理深层嵌套的可选字段，??设置默认值，不用写冗余的if-else，还能避免name存在但name[0]或given[0]缺失导致的报错：

getPatientList(currentPage).then((res: any) => {
  console.log("Response in ini: ", res);
  const data = res.map((patient: any) => ({
    id: patient.resource.id,
    name: patient.resource.name?.[0]?.given?.[0] ?? "Unknown",
    birthDate: patient.resource.birthDate,
    gender: patient.resource.gender,
  }));
  // 后续用data渲染列表
});

2. 定义TypeScript类型，替代any #

用类型定义约束数据结构，既能获得代码提示，也能在编译阶段发现潜在问题：

// 定义Patient相关类型
interface PatientName {
  given: string[];
}

interface PatientResource {
  id: string;
  name?: PatientName[];
  birthDate?: string;
  gender?: string;
}

interface PatientItem {
  resource: PatientResource;
}

// 使用类型替代any
getPatientList(currentPage).then((res: PatientItem[]) => {
  console.log("Response in ini: ", res);
  const data = res.map((patient) => ({
    id: patient.resource.id,
    name: patient.resource.name?.[0]?.given?.[0] ?? "Unknown",
    birthDate: patient.resource.birthDate,
    gender: patient.resource.gender,
  }));
});

3. 提取处理函数，提升代码复用性 #

如果后续还有其他地方需要处理Patient数据，可以把转换逻辑抽成单独函数：

const formatPatientData = (patient: PatientItem) => ({
  id: patient.resource.id,
  name: patient.resource.name?.[0]?.given?.[0] ?? "Unknown",
  birthDate: patient.resource.birthDate,
  gender: patient.resource.gender,
});

getPatientList(currentPage).then((res: PatientItem[]) => {
  console.log("Response in ini: ", res);
  const data = res.map(formatPatientData);
});

4. 统一处理其他缺失字段 #

如果birthDate、gender也可能缺失，同样可以用空值合并给默认值：

const formatPatientData = (patient: PatientItem) => ({
  id: patient.resource.id,
  name: patient.resource.name?.[0]?.given?.[0] ?? "Unknown",
  birthDate: patient.resource.birthDate ?? "未填写",
  gender: patient.resource.gender ?? "未知",
});

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