用戶首次實時登錄firebase數據庫時如何創建用戶特定數據？

Question

我希望代碼能夠在用戶登錄時創建特定數據，但如果 firebase 實時數據庫中已經存在，則不會創建它。 我使用了以下代碼，通過它檢查孩子是否已經存在，如果沒有，則在 firebase 數據庫中創建孩子，但不知何故，代碼的行為不正常。 當用戶再次登錄時，完整的數據部分將被重寫。

片段我需要幫助

if (!(checkdata(user.uid))) {
            writeUserData(user.uid,user.displayName,user.email,user.photoURL)
        }
var database = firebase.database();

function checkdata(userid){
    var ref = firebase.database().ref("users");
ref.once("value")
  .then(function(snapshot) {
    var datapresent = snapshot.hasChild(userid); // true
    return datapresent
  });
}
function writeUserData(userId, name, email, imageUrl) {
    firebase.database().ref('users/' + userId).set({
      username: name,
      email: email,
      profile_picture : imageUrl,
      cropdata : []
      
    });
  }

完整的JS文件

const signInBtn = document.getElementById('signinbtn');
const signOutBtn = document.getElementById('signoutbtn');
const userDetails = document.getElementById('username');

const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();

signInBtn.onclick = () => auth.signInWithPopup(provider);

signOutBtn.onclick = () => auth.signOut();

function toggle(className, displayState){
    var elements = document.getElementsByClassName(className)

    for (var i = 0; i < elements.length; i++){
        elements[i].style.display = displayState;
    }
}

auth.onAuthStateChanged(function(user) {
    if (user) {
        // signed in
        toggle('userishere', 'block');
        toggle('usernothere', 'none');
        //userDetails.innerHTML = `<h3>Hello ${user.displayName}!</h3> <p>User ID: ${user.uid}</p>`;
        userDetails.innerHTML = `Hello ${user.displayName}!`
        console.log(user)
        if (!(checkdata(user.uid))) {
            writeUserData(user.uid,user.displayName,user.email,user.photoURL)
        }
    } else {
        // not signed in
        toggle('userishere', 'none');
        toggle('usernothere', 'block');
        userDetails.innerHTML = '';
    }
});


var database = firebase.database();

function checkdata(userid){
    var ref = firebase.database().ref("users");
ref.once("value")
  .then(function(snapshot) {
    var datapresent = snapshot.hasChild(userid); // true
    return datapresent
  });
}
function writeUserData(userId, name, email, imageUrl) {
    firebase.database().ref('users/' + userId).set({
      username: name,
      email: email,
      profile_picture : imageUrl,
      cropdata : []
      
    });
  }
 

Answer 1

我剛剛找到了解決方案，異步代碼沒有等待我的 firebase 響應，只是檢查了 datapresent 是否為真，所以在 function 之前使用異步定義並在 ref.once(value) 之前等待，我的問題是解決。 下面的工作代碼：

const signInBtn = document.getElementById('signinbtn');
const signOutBtn = document.getElementById('signoutbtn');
const userDetails = document.getElementById('username');
var database = firebase.database();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();



signInBtn.onclick =  () => auth.signInWithPopup(provider);

signOutBtn.onclick =  () => auth.signOut();

async function checkdata(user){
    let ref = firebase.database().ref("users");
    let snapshot = await ref.once('value');
    if (!snapshot.hasChild(user.uid)){
        console.log(user)
        writeUserData(user.uid,user.displayName,user.email,user.photoURL)
        console.log("write done")
    }
    else{
        console.log("did not write")
    }
}

function writeUserData(userId, name, email, imageUrl) {
    firebase.database().ref('users/' + userId).set({
        username: name,
        email: email,
        profile_picture: imageUrl,
        cropdata: []
    });
}


function toggle(className, displayState) {
    var elements = document.getElementsByClassName(className)

    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = displayState;
    }
}

auth.onAuthStateChanged(function (user) {
    if (user) {
        // signed in
        toggle('userishere', 'block');
        toggle('usernothere', 'none');
        //userDetails.innerHTML = `<h3>Hello ${user.displayName}!</h3> <p>User ID: ${user.uid}</p>`;
        userDetails.innerHTML = `Hello ${user.displayName}!`
        console.log(user)
        checkdata(user)
    }
    else {
        toggle('userishere', 'none');
        toggle('usernothere', 'block');
        userDetails.innerHTML = '';
    }
})