無法使firestore僅從記錄的用戶ID中獲取檔案-有解無憂

在弗蘭克的幫助下更新了對我有用的代碼！謝謝弗蘭克！

onAuthStateChanged(auth, async (user) => {
  if (user) {
    const userID = user.email;
    console.log(userID);
const q = query(collection(db, "userdata"), where("email", "==", userID));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
  const docs = doc.data();
   document.getElementById('nome').innerHTML = docs.nome;
   document.getElementById('sobrenome').innerHTML = docs.sobrenome;
   document.getElementById('email').innerHTML = docs.email;
   document.getElementById('saldo').innerHTML = docs.saldo;
   document.getElementById('meta').innerHTML = docs.objetivo;
 
   })
  } else {
   console.log("nada");
  }
});

你好嗎？

這是我在這里的第一個問題，我是一名 UX 設計師，而且我對使用 Firebase 還是很陌生。

我一直在嘗試使用javascript和firebase SDK在與firebase集成的webflow上開發一個系統到個人專案，但遇到了這個問題：

我已經成功地創建了身份驗證系統、注冊系統，并且一切都正常運行。

但是，當我嘗試從 Firestore 用戶資料集合中獲取資料時，我無法獲取當前用戶 ID 并將其傳遞給查詢中的 WHERE 字串。

如果我在沒有 WHERE 的情況下運行查詢，它可以完美地為我帶來 userdata 集合中的所有檔案，但是當我嘗試僅為特定用戶執行此操作時，它會失敗。

我已經嘗試了很多我認為不是正確方法的事情，下面的 JavaScript 是我最后一次嘗試，但我已經堅持了 8 個小時，我希望有人能提供幫助我，我認為我對此太陌生，無法理解如何將 id 變數傳遞到查詢中。

任何人都可以幫忙嗎？

這是專案的鏈接：https : //poupei.webflow.io/ 只需單擊 Criar conta 創建一個帳戶，您可以使用假電子郵件和 6 位密碼然后登錄。

  // Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
import { getAuth, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-auth.js";
import { getFirestore, collection, getDocs, query, where, doc } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js"


// 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 app = initializeApp({
    apiKey: "AIzaSyAZUIyxf4Lsw6D9JOzVuNslsGJ8gXkPBVY",
    authDomain: "poupei-app.firebaseapp.com",
    projectId: "poupei-app",
    storageBucket: "poupei-app.appspot.com",
    messagingSenderId: "837432279066",
    appId: "1:837432279066:web:119bc86e42fb87ac17d1a3"
});

  // Initialize Firebase
  const auth = getAuth()
  const db = getFirestore();
  onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const userID = user.id;
    console.log("Logged In");
    console.log(userID);
    // ...
  } else {
    // User is signed out
    window.location.replace("https://poupei.webflow.io/");
  }
});

const q = query(collection(db, "userdata"), where("id", "==", userID));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
  const docs = doc.data();
   document.getElementById('nome').innerHTML = docs.nome;
   document.getElementById('sobrenome').innerHTML = docs.sobrenome;
   document.getElementById('email').innerHTML = docs.email;
   document.getElementById('saldo').innerHTML = docs.saldo;
});

 document.getElementById('logoutBtn').addEventListener('click', function(){
  signOut(auth).then(() => {
  // Sign-out successful.
  window.location.replace("https://poupei.webflow.io/");
}).catch((error) => {
  // An error happened.
});
});

</script>

′′′

uj5u.com熱心網友回復：

@Allennick 在他們的回答中給出了正確的問題原因，但解決方案不起作用。

登錄 Firebase（以及從 Firestore 和大多數其他現代云 API 加載資料）是一項異步操作。當用戶正在登錄（或正在加載資料）時，您的主代碼會繼續運行。然后當用戶登錄時，你的回呼代碼就會被執行。

通過在除錯器中運行或添加一些日志記錄，最容易看到此流程：

console.log("Attaching auth state listener");
onAuthStateChanged(auth, (user) => {
  if (user) {
    console.log("Got user state");
  }
});

console.log("Starting database query");
const q = query(collection(db, "userdata"), where("id", "==", userID));
const querySnapshot = await getDocs(q);

當您運行此代碼時，它會記錄：

附加身份驗證狀態偵聽器

啟動資料庫查詢

得到用戶狀態

這可能不是您期望的順序，但它完美地解釋了為什么您沒有從資料庫中獲取用戶資料：查詢在加載用戶之前執行。

這個問題的解決方案總是一樣的：任何需要對當前用戶狀態做出反應的代碼，需要在onAuthStateChanged回呼內部，從那里呼叫，或者以其他方式同步。

最簡單的解決方法是將資料庫代碼移動到回呼中，如下所示：

onAuthStateChanged(auth, async (user) => {
  if (user) {
    const userID = user.id;

    // ?? Now that the user us know, we can load their data
    const q = query(collection(db, "userdata"), where("id", "==", userID));
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
      // doc.data() is never undefined for query doc snapshots
      console.log(doc.id, " => ", doc.data());
      const docs = doc.data();
       document.getElementById('nome').innerHTML = docs.nome;
       document.getElementById('sobrenome').innerHTML = docs.sobrenome;
       document.getElementById('email').innerHTML = docs.email;
       document.getElementById('saldo').innerHTML = docs.saldo;
    });
    
    document.getElementById('logoutBtn').addEventListener('click', function(){
      signOut(auth).then(() => {
      // Sign-out successful.
      window.location.replace("https://poupei.webflow.io/");
    }).catch((error) => {
      // An error happened.
    });
  } else {
    // User is signed out
    window.location.replace("https://poupei.webflow.io/");
  }
});

另見：

firebase.auth().currentUser 在頁面加載時為空
有什么方法可以獲取 Firebase Auth 用戶 UID？
firebase.initializeApp 回呼/承諾？

uj5u.com熱心網友回復：

我認為查詢不知道用戶 ID 是什么，因為您在 authStateChange 中宣告了該變數。嘗試將 userID 的宣告移動到全域范圍在執行查詢之前添加一個 console.log() 以查看 userID 是否設定正確。或者只是將執行查詢的代碼放在 onAuthStateChanged 代碼中，以便您可以使用用戶 ID。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406584.html

標籤：

上一篇：反應式表單驗證問題

下一篇：將變數內容匯出到檔案