如何使用TypeScript接口实现Firebase RealtimeDB结构化数据的读写？

Firebase RealtimeDB 的序列化、反序列化逻辑仅支持原生 JSON 结构，JS 内置的 Map 属于引用类型，无法被直接序列化为普通 JSON 对象，因此写入时会被自动丢弃；读取时返回的结构本身就是普通对象，直接用 Map 类型做断言只是骗过了 TypeScript 编译器，运行时并不会生成真实的 Map 实例，自然没有对应的 .get() 等方法。

方案1：使用索引签名定义接口（最推荐，无额外转换成本） #

直接定义和 Firebase 返回的 JSON 结构完全匹配的 TypeScript 接口，不需要做任何运行时转换，即可同时适配读写需求。

interface Family {
  name: string;
  // 索引签名：定义key为字符串类型，value为数字类型，和Firebase返回的普通对象结构完全一致
  children: { [key: string]: number }
}

读写使用示例 #

• 读取时直接做类型断言即可：

const snapshot = await ref.get()
const family = snapshot.val() as Family

• 操作 children 字段直接用对象原生语法即可，等价于 Map 的对应 API：

// 读取值，等价于 Map.get()
const jackAge = family.children['Jack']
// 修改/新增值，等价于 Map.set()
family.children['Lily'] = 18
// 删除值，等价于 Map.delete()
delete family.children['Jack']
// 遍历，等价于 Map.forEach()
Object.entries(family.children).forEach(([name, age]) => {
  console.log(name, age)
})

• 写入时直接传递对象即可，不会出现字段丢失的问题：

await ref.set(family)

方案2：需使用Map API的场景（双向转换） #

如果业务代码已经大量依赖 Map 的API，不想修改原有逻辑，可以定义两套类型做手动双向转换：

// 存储适配类型：和Firebase JSON结构匹配，用于读写数据库
interface FamilyDTO {
  name: string;
  children: { [key: string]: number }
}

// 业务类型：带Map结构，用于业务逻辑处理
interface Family {
  name: string;
  children: Map<string, number>
}

定义两个转换函数：

// 读取时：存储结构转业务结构
function dtoToFamily(dto: FamilyDTO): Family {
  return {
    name: dto.name,
    children: new Map(Object.entries(dto.children))
  }
}

// 写入时：业务结构转存储结构
function familyToDto(family: Family): FamilyDTO {
  return {
    name: family.name,
    children: Object.fromEntries(family.children.entries())
  }
}

读写使用示例 #

// 读取数据
const snapshot = await ref.get()
const familyDto = snapshot.val() as FamilyDTO
const family = dtoToFamily(familyDto)

// 业务逻辑中可以正常使用Map的所有API
console.log(family.children.get('Tara'))

// 写入数据
await ref.set(familyToDto(family))

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