ReactJS调用Firebase Realtime DB POST接口返回400 Bad Request

你当前期望的数据库存储结构参考如下：

结构层级为blogs -> 用户UID -> 自定义博客ID -> 博客具体字段。

问题成因 #

• 请求域名拼接错误：你混用了Firebase Realtime Database的两种域名格式，在firebasedatabase.app后缀后多余拼接了.firebaseio.com，请求目标地址本身无效。
• 请求体未做JSON序列化：fetch发送application/json类型请求时，body字段不能直接传入JavaScript对象，必须通过JSON.stringify()转为JSON字符串，直接传对象会被默认序列化为[object Object]，服务端无法解析直接返回400。
• 请求方法与数据结构不匹配：Firebase REST API中POST方法会在目标路径下自动生成随机唯一子key，适合不需要自定义主键的写入场景；你需要写入blogs/[用户UID]/[自增博客ID]的固定层级结构，用POST到根节点无法实现自定义路径，且你在body中写的id、num是静态字面量，并未引用你从localStorage取到的实际变量值，就算请求成功写入结构也完全不符合预期。
• 本地缓存值逻辑隐患：localStorage存储的所有值都是字符串类型，直接执行+1操作会触发字符串拼接而非数字递增（比如存储值为"1"时+1会得到"11"而非2），且未做初始值兜底，首次调用时取到null会引发后续逻辑报错。

修复代码 #

const uid = localStorage.getItem('uid')
// 首次调用时初始化博客编号默认值
if (!localStorage.getItem('blogNumber')) {
  localStorage.setItem('blogNumber', '0')
}

const postData = async () => {
  const blogNum = Number(localStorage.getItem('blogNumber'))
  const resp = await fetch(
    // 修正域名，直接定位到对应用户下的对应博客ID路径
    `https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app/blogs/${uid}/${blogNum}.json`,
    {
      // 自定义主键写入用PUT方法
      method: 'PUT',
      // 序列化请求体为JSON字符串，Date对象转ISO字符串保证兼容性
      body: JSON.stringify({
        title: titleRef.current.value,
        description: contentRef.current.value,
        createdAt: new Date().toISOString(),
        isPosted: false
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    }
  )
  if (!resp.ok) throw new Error(`写入失败，状态码：${resp.status}`)
  const data = await resp.json()
  // 编号递增后存回缓存
  localStorage.setItem('blogNumber', String(blogNum + 1))
  return data
}

补充说明 #

• 如果你不需要自己维护自增博客ID，想让Firebase自动生成唯一主键，可以把请求路径改为https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app/blogs/${uid}.json，请求方法改回POST，body直接传入博客字段对象即可，接口返回结果中会包含自动生成的博客ID。
• 正式环境请配置Firebase Database Rules做身份校验和权限控制，不要放开公共写入权限，避免数据被恶意篡改。

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