Firebase调用database触发TypeError读取undefined属性问题求助

问题原因 #

• firebase.js存在循环导入错误，第一行代码import firebase from './firebase'是导入自身，导致导出的firebase变量为undefined，这是触发Cannot read properties of undefined (reading 'database')报错的核心原因。
• 你当前使用的是Firebase v9+的模块化SDK，却仍然使用v8及之前版本的命名空间调用方式firebase.database()，且没有导入Realtime Database的相关依赖。
• React组件中写DOM属性用了class而非className，会触发额外语法警告。

修复步骤 #

1. 重写firebase.js配置 #

// 删除原有的自导入语句
import { initializeApp } from "firebase/app";
// 引入Realtime Database依赖
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  // 保留你原有配置不变，补全缺失的字段即可
  apiKey: "AIzaSyC6..............",
  authDomain: "...................",
  databaseURL: "....................",
  projectId: "...................",
  storageBucket: "...............",
  messagingSenderId: "...............",
  appId: "1:................."
};

// 初始化应用
const app = initializeApp(firebaseConfig);
// 初始化并导出数据库实例
export const db = getDatabase(app);

2. 调整FirebaseCrud.js代码 #

import { Container, Grid, Segment, Form, Input, Button } from "semantic-ui-react";
import { useState } from "react";
// 导入数据库实例和需要的操作方法
import { db } from "./firebase";
import { ref, push } from "firebase/database";

const FirebaseCrud = () => {
    const [aFirstName, setAFirstName] = useState("");
    const [aLastName, setALastName] = useState("");

    const handleAddUser = () => {
        // 替换原有老版本写法
        const userInfoRef = ref(db, '/UserInfo');
        const data = {
            FirstName: aFirstName,
            LastName: aLastName
        };
        push(userInfoRef, data);
    };
   
    return ( 
    <!-- 替换class为className -->
    <div className="ui hidden divider">
        <Container>
            <Grid>
                <Grid.Row columns="2">
                    <Grid.Column>
                        <Segment>
                            <Form>
                                <Form.Field>
                                    <label>FirstName</label>
                                    <Input placeholder="FirstName" focus value={aFirstName} onChange={(e)=>{setAFirstName(e.target.value);}}/>
                                </Form.Field>
                                <Form.Field>
                                    <label>LastName</label>
                                    <Input placeholder="LastName" focus value={aLastName} onChange={(e)=>{setALastName(e.target.value);}}/>
                                </Form.Field>
                                <Form.Field>
                                    <Button onClick={handleAddUser}>Add User</Button>
                                </Form.Field>
                            </Form>
                        </Segment>
                    </Grid.Column>
                    <Grid.Column>Edit User</Grid.Column>
                </Grid.Row>
            </Grid>
        </Container>  
    </div>
   )
}

export default FirebaseCrud;

额外注意事项 #

• 操作前确认你已经在Firebase控制台开启了Realtime Database服务，测试阶段可先将数据库权限调整为允许读写，验证功能正常后再修改为正式权限规则。
• 如果你需要使用Firestore而非Realtime Database，需要替换导入的依赖为firebase/firestore相关方法，写法和上面的Realtime Database逻辑一致。

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