后端返回的 JSON 字段是 null 怎么办？前端优雅处理技巧
2024-05-17
nickname: null 和没有 nickname 键，后端可能说「一样」；前端展示、表单回写、TypeScript 类型却是三种情况。不统一约定就会出 undefined 报错或脏数据。
三种「空」
缺失键：对象上没有该属性；JSON 里没有这个 field。
null：显式空值，JSON 合法字面量。
空字符串 ""：有值，但长度为 0——有时表示用户清空了输入。
TypeScript 建模
可选 nickname?: string 表示可缺失；nickname: string | null 表示必出现但可为 null。
与后端 OpenAPI 定义对齐，不要在客户端随意混用。
展示层模式
统一 normalize：接口层 map 成 { nickname: raw.nickname ?? '' } 或保留 null 用 ?? '未设置' 展示。
列表页避免直接渲染 null；表格单元格用占位符 — 或 N/A。
const label = user.nickname ?? "未设置";
// 注意：null 与 "" 是否同一展示，需产品约定表单回写
空输入提交 null 还是 omit 字段？要在 API 文档写死；前端 submit 前 JSON.stringify 预览。
PATCH 语义下 omit 常表示「不修改」，null 表示「清空」。