reactjs和firebase函数db(数据库)无法运行

mccptt67  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(166)

因此,这是我的第一个项目与firebase和即时通讯试图发送数据到数据库,但功能不工作:

const onSignUp = async (email, password, username) => {
  try {
    const authUser = await createUserWithEmailAndPassword(
      firebase,
      email,
      password
    );
    db.collection("users").add({  
        owner_uid: authUser.user.uid,
        usernames: username,
        email: authUser.user.email,
        profile_pic: await randomProfiles()
      })
      .then(() => {
        console.log("CREATED");
        this.props.phase(0);
      })
      .catch(() => {
        console.log("ERROR");
        alert("Bruh");
      });
  } catch (error) {}
};
const randomProfiles = async () => {
  const respone = await fetch("https://randomuser.me/api");
  const data = await respone.json();
  return data.results[0].picture.large;
};

字符串
我觉得问题可能出在

db.collection("users").add({


这是新代码的编辑部分:

// Import the functions you need from the SDKs you need
        import { initializeApp } from "firebase/app";
        import { getAuth } from "firebase/auth";
        import { getFirestore } from "firebase/firestore";
        // TODO: Add SDKs for Firebase products that you want to use
        // https://firebase.google.com/docs/web/setup#available-libraries

        // Your web app's Firebase configuration
        const firebaseConfig = {
          apiKey: "AIzaSyDVy_vUuhZN-qwMmTOUjsViQ4gW36q-Xxk",
          authDomain: "social-media-app-d29f2.firebaseapp.com",
          projectId: "social-media-app-d29f2",
          storageBucket: "social-media-app-d29f2.appspot.com",
          messagingSenderId: "103854538000",
          appId: "1:103854538000:web:9c77e5a5f7de0c3cb7f995"
        };

        const app = initializeApp(firebaseConfig);
        const auth = getAuth(app);
        const db = getFirestore(app);
        export { auth, db };


所以这是我以前的做法

92dk7w1h

92dk7w1h1#

您正在混合Firebase SDK V8和V9语法。
const authUser = await createUserWithEmailAndPassword(...)是V9语法

db.collection("users").add(...)是V8语法。
按照下面的方法修改你的代码就可以了。我不知道你是如何定义传递给createUserWithEmailAndPassword()方法的firebase对象的,所以我包含了所有的导入和初始化代码。这部分由你来修改。

import { initializeApp } from "firebase/app";

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { getDatabase, collection, addDoc } from "firebase/firestore";

const app = initializeApp(firebaseConfig);

const onSignUp = async (email, password, username) => {
    try {
        const auth = getAuth(app);

        const authUser = await createUserWithEmailAndPassword(
            auth,
            email,
            password
        );
               
        const db = getDatabase(app);
            
        await addDoc(collection(db, "users"), {
            owner_uid: authUser.user.uid,
            usernames: username,
            email: authUser.user.email,
            profile_pic: await randomProfiles()
        });

        this.props.phase(0);

    } catch (error) {
        console.log(error);
    }
};

字符串

相关问题