如何在Firebase Web 9.0.0中添加数据？旧版用户求助新版CRUD实现

1. 修正firebase配置文件 #

你当前仅导入了核心兼容包，缺少实时数据库的依赖导入，这是导致操作失效的核心原因，修正后的utils/firebase.js代码如下：

import firebase from 'firebase/compat/app';
// 新增实时数据库兼容模块导入
import 'firebase/compat/database';

const firebaseConfig = {
  apiKey: "AIzaSyDyfhIiB32tReM7E66wFR8oD0mMC3LKZWM",
  authDomain: "nutriapp-b77ee.firebaseapp.com",
  projectId: "nutriapp-b77ee",
  storageBucket: "nutriapp-b77ee.appspot.com",
  messagingSenderId: "717648627918",
  appId: "1:717648627918:web:b382565fc790dd1495a89f",
  measurementId: "G-W3H2K8NGNJ"
};

firebase.initializeApp(firebaseConfig)

export default firebase;

2. 优化新增Todo组件逻辑 #

现有逻辑缺少空值校验、提交后清空输入框和错误处理，优化后的代码如下：

import React, { useState } from 'react';
import firebase from '../utils/firebase'

export default function Form() {
  const [title, setTitle] = useState('')

  const handleChange = (e) => {
    setTitle(e.target.value)
  }

  const createTodo = () => {
    // 过滤空内容提交
    if (!title.trim()) return
    const todoRef = firebase.database().ref('Todo')
    const todo = {
      title: title.trim(),
      complete: false
    };
    todoRef.push(todo)
      .then(() => {
        // 提交成功清空输入框
        setTitle('')
      })
      .catch(err => {
        console.error('待办添加失败：', err)
      })
  }

  return (
    <div>
      <input type="text" onChange={handleChange} value={title} placeholder="请输入待办内容"/>
      <button onClick={createTodo}>Add Todo</button>
    </div>
    )
}

3. 完整基础CRUD操作参考 #

所有操作均基于你使用的v9兼容模式语法：

• 新增数据：使用push()方法自动生成唯一ID作为数据键
• 查询所有数据：

// 一次性获取全量待办
firebase.database().ref('Todo').once('value')
  .then(snapshot => {
    const todoList = []
    snapshot.forEach(child => {
      todoList.push({
        id: child.key,
        ...child.val()
      })
    })
    // 此处可将todoList赋值给状态渲染
  })

// 监听数据实时变动，自动触发更新
firebase.database().ref('Todo').on('value', snapshot => {
  // 处理逻辑同上
})

• 修改数据：通过待办ID定位目标数据后调用update()

// 示例：将ID为xxx的待办标记为已完成
firebase.database().ref(`Todo/${todoId}`).update({
  complete: true
})

• 删除数据：通过待办ID定位目标数据后调用remove()

firebase.database().ref(`Todo/${todoId}`).remove()

4. 权限规则注意事项 #

如果运行时报权限错误，先到Firebase控制台的实时数据库规则页面，将测试阶段的规则临时修改为：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

注意：项目上线前必须调整规则，增加身份校验逻辑，避免数据被未授权访问/修改

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