React项目中将数据保存到实时数据库时出现TypeError：databaseRef.child不是函数

Question

我创建了一个react项目，代码如下：-

AuthContext.js：-

       import { useContext, createContext, useEffect, useState } from 'react';
    import {
      GoogleAuthProvider,
      signInWithPopup,
      signInWithRedirect,
      signOut,
      onAuthStateChanged,
    } from 'firebase/auth';
    import { auth, databaseRef } from '../firebase'; 

    const AuthContext = createContext();

    export const AuthContextProvider = ({ children }) => {
      const [user, setUser] = useState({});

      const googleSignIn = async () => {
        const provider = new GoogleAuthProvider();
        try {
          const result = await signInWithPopup(auth, provider);
          return result;
        } catch (error) {
          console.error('Error during sign-in:', error);
        }
      };

      const logOut = async () => { // Make logOut async for potential errors
        try {
          await signOut(auth);
        } catch (error) {
          console.error('Error signing out:', error);
        }
      };

      useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
          setUser(currentUser);
          console.log('User', currentUser);
        });

        return unsubscribe;
      }, []);

      return (
        <AuthContext.Provider value={{ googleSignIn, logOut, user, databaseRef }}>
          {children}
        </AuthContext.Provider>
      );
    };

export const UserAuth = () => {
  return useContext(AuthContext);
};

Account.jsx：-

import React, { useEffect, useState } from 'react';
import { UserAuth } from '../context/AuthContext';
import Navbar from '../components/Navbar';

const Account = () => {
  const { user, databaseRef } = UserAuth();
  const [userIds, setUserIds] = useState([]);

  useEffect(() => {
    const fetchUserIds = async () => {
      const snapshot = await databaseRef.child('userids').once('value');
      const data = snapshot.val();
      setUserIds(Object.values(data || {}));
    };

    fetchUserIds();
  }, []);

  return (
    <div className='container'>
      <Navbar url='/signin' text='Log out' />
      <div className='w-[300px] m-auto'>
        <h1 className='text-center text-2xl font-bold pt-12'>Account</h1>
        <div>
          <p>Welcome, {user?.displayName}</p>
          {userIds.length > 0 && (
            <ul>
              {userIds.map((id) => (
                <li key={id}>{id}</li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

export default Account;

Signin.jsx：-

 import React, { useEffect } from 'react';
import { GoogleButton } from 'react-google-button';
import { UserAuth } from '../context/AuthContext';
import { useNavigate } from 'react-router-dom';
import Navbar from '../components/Navbar';

const Signin = () => {
  const { googleSignIn, user, databaseRef } = UserAuth();
  const navigate = useNavigate();

  const handleGoogleSignIn = async () => {
    try {
      const result = await googleSignIn();
      const userObj = result.user;

      const userId = userObj.uid;
      console.log('Attempting to save user ID:', userId); // Log before saving
      await databaseRef.child('userids').push(userId);
      console.log('User ID saved successfully:', userId);

  navigate('/account');
    } catch (error) {
      console.error('Error during sign-in or saving user ID:', error);
    }
  };

   useEffect(() => {
     if (user != null) {
       // navigate('/account');
     }
   }, [user]);

  return (
    <div>
      <Navbar url='/' text='Home' />
      <h1 className='text-center text-3xl font-bold py-8'>Sign in</h1>
      <div className='max-w-[240px] m-auto py-4'>
        <GoogleButton onClick={handleGoogleSignIn} />
      </div>
    </div>
  );
};

export default Signin;

firebase.js：-

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getDatabase, ref } from 'firebase/database';

// TODO: Add SDKs for Firebase products that you want to use
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "QIazSyDO132QtFu798QoI472h6pb2KzdXZExyQs",
  authDomain: "trail-24.firebaseapp.com",
  databaseURL: "https://trail-24-default-rtdb.firebaseio.com",
  projectId: "trail-24",
  storageBucket: "trail-24.appspot.com",
  messagingSenderId: "1011673947249",
  appId: "1:1011943747984:web:08ee8dd634ffe87c55f915",
  measurementId: "G-FSXIJTC9PX"
};


const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
const db = getDatabase(app);
export const databaseRef = ref(db);

这是控制台日志：-

   Attempting to save user ID: RdMQaBouH2RY5rVozaw5b9dSAro1

Signin.jsx:23 登录或保存用户 ID 时出错：TypeError：databaseRef.child 不是函数 在 Object.handleGoogleSignIn [as onClick] (Signin.jsx:18:1)

Firebase 数据库规则：-

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

我是react新手，我已经尝试过不同的方法来将这些数据保存在firebase的实时数据库中，但是我成功登录了用户，但无法保存数据，我到达了进程所在的位置保存数据的已初始化，但未保存数据，创建 dataref.child() 时出现问题。

请有人帮助我。

Answer 1

Firebase 版本 9 及更高版本显着更改了 api。您不再将函数链接在一起，例如

.child

和

.once

。相反，您可以从库中导入函数。例如：

import { child, get } from 'firebase/database';
// ...
const fetchUserIds = async () => {
  const snapshot = await get(child(databaseRef, 'userIds'));
  const data = snapshot.val();
  setUserIds(Object.values(data || {}));
};

有关升级到新版本的信息，请参阅本文：https://firebase.google.com/docs/web/modular-upgrade

此外，该文档还包含新旧风格的示例，您可以比较它们。在示例顶部，单击最新版本的“Web 模块化 API”，旧版本的“Web 命名空间 API”：https://firebase.google.com/docs/database/web/read-and-write #web-modular-api_3