无法读取 Firebase 实时数据库中的数据答案

【问题标题】：Cannot read data in Firebase Realtime Database无法读取 Firebase 实时数据库中的数据
【发布时间】：2020-09-05 20:03:38
【问题描述】：

我正在使用 Firebase 实时数据库和 JavaScript/HTML 构建登录页面。我已经创建了一个注册页面，在其中一个注册后，他们会获得一个唯一的 ID。此 ID 是 firebase 数据库中所有用户数据的父级标题。登录页面有一个表单，可以在其中粘贴此 ID，然后能够访问他们在注册时输入的数据。我的问题是代码没有检索任何数据（特别是一旦用户登录，我希望他们的电子邮件收到警报，但这没有发生）。谁能帮我这个？我的代码和我的数据库图像如下：

JavaScript：

var firebaseConfig = {
  apiKey: "..................",
  authDomain: "..................",
  databaseURL: "..................",
  projectId: "..................",
  storageBucket: "..................",
  messagingSenderId: "..................",
  appId: "..................",
  measurementId: ".................."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Reference messages collection


document.getElementById('loginForm').addEventListener('submit', getData);

function getData(){
    var loginId = document.getElementById("loginId").value;

    firebase.database().ref('user/' + loginId).once('value').then(function (snapshot) {
        var address = snapshot.val().address; 
        var city = snapshot.val().city;
        var email = snapshot.val().email;
        var firstname = snapshot.val().firstname;
        var lastname = snapshot.val().lastname;
        var password = snapshot.val().password;
        var phonenumber = snapshot.val().phonenumber;
        var postalcode = snapshot.val().postalcode;
        var state = snapshot.val().state;

        alert(email);
        
    });

}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Web Building</title>
  <!--<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">>-->
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />-->
  <!--<link rel="stylesheet" href="style.css">>-->
</head>
<body>
  <div class="container">
    <h1 class="brand"><span>Web</span> Building</h1>
    <div class="wrapper">
      <div class="company-info">
         <h3>Web Building</h3>
         <ul>
           <li><i class="fa fa-road"></i> 1 Something st</li>
           <li><i class="fa fa-phone"></i> (555) 555-5555</li>
           <li><i class="fa fa-envelope"></i> test@test.test</li>
         </ul>
       </div>
       <div class="contact">
         <h3>Login</h3>

         <form id="loginForm">
           <p>
             <label>Paste Login ID</label>
             <input type="text" name="loginId" id="loginId">
           </p>
           <p class="full">
             <button type="submit">Login</button>
           </p>
         </form>
       </div>
     </div>
   </div>

   <script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-app.js"></script>
   <script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-database.js"></script>
   <script src="login.js"></script>
</body>
</html>

Firebase 数据库：

编辑

这是我的数据库的结构：

{
  "user" : {
    "8gfpBhVrIi" : {
      "address" : "3 second street",
      "city" : "albuquerque",
      "email" : "tedbert999@gmail.com",
      "firstname" : "Teddy",
      "lastname" : "Porfiris",
      "password" : "password",
      "phonenumber" : "4161231234",
      "postalcode" : "123456",
      "state" : "New Mexico"
    }
  }
}

这是注册后接收登录 ID 的代码：

JavaScript：

var firebaseConfig = {
  apiKey: "..................",
  authDomain: "..................",
  databaseURL: "..................",
  projectId: "..................",
  storageBucket: "..................",
  messagingSenderId: "..................",
  appId: "..................",
  measurementId: ".................."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);

// Generate Id

function makeid(length) {
   var result           = '';
   var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   var charactersLength = characters.length;
   for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
}



// Submit form
function submitForm(e){
  e.preventDefault();

  // Get values
  var firstname = getInputVal('firstname');
  var lastname = getInputVal('lastname');
  var state = getInputVal('state');
  var email = getInputVal('email');
  var phonenumber = getInputVal('phonenumber');
  var password = getInputVal('password');
  var address = getInputVal('address');
  var city = getInputVal('city');
  var postalcode = getInputVal('postalcode');

  var accountId = makeid(10)
  // Save message
  saveMessage(firstname, lastname, state, email, phonenumber, password, address, city, postalcode, accountId);
  var id_sentence = document.getElementById('loginId');
  var accountId_text = document.createTextNode(accountId);
  id_sentence.appendChild(accountId_text);

  // Show alert
  document.querySelector('.alert').style.display = 'block';

  // Hide alert after 3 seconds
  setTimeout(function(){
    document.querySelector('.alert').style.display = 'none';
  },3000);

  // Clear form
  document.getElementById('contactForm').reset();
}

// Function to get get form values
function getInputVal(id){
  return document.getElementById(id).value;
}

// Save message to firebase
function saveMessage(firstname, lastname, state, email, phonenumber, password, address, city, postalcode, userId){
  // Reference messages collection

  var newMessageRef = firebase.database().ref('/user/' + userId);
  newMessageRef.set({
    firstname:firstname,
    lastname:lastname,
    state:state,
    email:email,
    phonenumber:phonenumber,
    password:password,
    address:address,
    city:city,
    postalcode:postalcode
  });
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Web Design</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1 class="brand"><span>Good</span> Web Design</h1>
    <div class="wrapper">
      <div class="company-info">
        <h3>Web Design</h3>
        <ul>
          <li><i class="fa fa-road"></i> 11 street st</li>
          <li><i class="fa fa-phone"></i> (555) 555-5555</li>
          <li><i class="fa fa-envelope"></i> test@tes.test</li>
        </ul>
      </div>
      <div class="contact">
        <h3>Sign Up</h3>
        <div class="alert">Your have been signd up!</div>
        <form id="contactForm">
          <p>
            <label>First Name</label>
            <input type="text" name="firstname" id="firstname">
          </p>
          <p>
            <label>Last Name</label>
            <input type="text" name="Last Name" id="lastname">
          </p>
          <p>
            <label>State</label>
            <select name="state" id="state">
              <option value="Alabama">Alabama</option>
              <option value="Arizona">Arizona</option>
              <option value="Arkansas">Arkansas</option>
              <option value="California">California</option>
              <option value="Colorado">Colorado</option>
              <option value="Connecticut">Connecticut</option>
              <option value="D.C.">D.C.</option>
              <option value="Delaware">Delaware</option>
              <option value="Florida">Florida</option>
              <option value="Georgia">Georgia</option>
              <option value="Idaho">Idaho</option>
              <option value="Illinois">Illinois</option>
              <option value="Indiana">Indiana</option>
              <option value="Iowa">Iowa</option>
              <option value="Kansas">Kansas</option>
              <option value="Kentucky">Kentucky</option>
              <option value="Louisiana">Louisiana</option>
              <option value="Maine">Maine</option>
              <option value="Massachusetts">Massachusetts</option>
              <option value="Maryland">Maryland</option>
              <option value="Michigan">Michigan</option>
              <option value="Minnesota">Minnesota</option>
              <option value="Mississippi">Mississippi</option>
              <option value="Missouri">Missouri</option>
              <option value="Montana">Montana</option>
              <option value="North Carolina">North Carolina</option>
              <option value="North Dakota">North Dakota </option>
              <option value="New Hampshire">New Hampshire</option>
              <option value="New Jersey">New Jersey</option>
              <option value="New Mexico">New Mexico</option>
              <option value="New York">New York</option>
              <option value="Nebraska">Nebraska</option>
              <option value="Nevada">Nevada</option>
              <option value="Ohio">Ohio</option>
              <option value="Oklahoma">Oklahoma</option>
              <option value="Oregon">Oregon</option>
              <option value="Pennsylvania">Pennsylvania</option>
              <option value="Rhode Island">Rhode Island</option>
              <option value="South Carolina">South Carolina</option>
              <option value="South Dakota">South Dakota</option>
              <option value="Tennessee">Tennessee</option>
              <option value="Texas">Texas</option>
              <option value="Utah">Utah</option>
              <option value="Virginia">Virginia</option>
              <option value="Vermont">Vermont</option>
              <option value="West Virginia">West Virginia</option>
              <option value="Washington">Washington</option>
              <option value="Wisconsin">Wisconsin</option>
              <option value="Wyoming">Wyoming</option>
            </select>
          </p>
          <p>
            <label>Email Address</label>
            <input type="email" name="email" id="email">
          </p>
          <p>
            <label>Phone Number</label>
            <input type="text" name="phonenumber" id="phonenumber">
          </p>
          <p>
            <label>Password</label>
            <input type="password" name="password" id="password">
          </p>
          <p>
            <label>Address</label>
            <input type="text" name="address" id="address">
          </p>
          <p>
            <label>City</label>
            <input type="text" name="city" id="city">
          </p>
          <p>
            <label>Postal Code</label>
            <input type="text" name="postalcode" id="postalcode">
          </p>
          <p class="full">
            <button type="submit">Sign Up</button>
          </p><br>

        </form>

      <div id="loginId">Your Login ID is: </div>


        <form action="/login.html">
            <p class="login">
                <button type="submit">Login</button>
            </p>
        </form>
      </div>
    </div>
  </div>

  <script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.19.1/firebase-database.js"></script>
  <script src="main.js"></script>
</body>
</html>

编辑

这是我得到的错误的图像：

【问题讨论】：

标签： javascript html firebase firebase-realtime-database

【解决方案1】：

请尝试使用以下代码，如果它有效，请告诉我：

我认为访问 Firebase 需要一个“/”，正如我们在 Firebase Official Documentation 中看到的那样，您还需要使用反引号 (`) 而不是单引号 (') 来包装字符串，如下所示：

function getData(){
   var loginId = document.getElementById("loginId").value;
   firebase.database().ref(`/user/` + loginId).once('value').then(function 
   (snapshot) {
        ...
        ...
    }).catch(function(){
        console.log('error');
   });
}

function saveMessage(firstname, lastname, state, email, phonenumber, password, address, city, postalcode, userId){
  // Reference messages collection

  var newMessageRef = firebase.database().ref(`/user/` + userId);
  newMessageRef.set({
    firstname:firstname,
    lastname:lastname,
    state:state,
    email:email,
    phonenumber:phonenumber,
    password:password,
    address:address,
    city:city,
    postalcode:postalcode
   });
}

【讨论】：

我已经添加了您在帖子中要求的信息。添加斜线不起作用。
我正在查看您的编辑帖子，同时您能否提供 loginId 变量的输出？
每个输出都是一个随机的 10 位数字字符串@Nibrass H。每次使用上面添加的代码注册时都会生成此字符串。此字符串还充当包含 firebase 数据库中新用户帐户详细信息的标头的标题。这是您需要的信息吗？如果没有，请发表评论，我会立即发送您需要的任何内容:)
能否在getData函数中打印snaphot的值？那是空的吗？变量地址、城市、电子邮件返回什么？请 console.log(snaphot)、console.log(address) 和我分享输出？
另外，请添加一个 catch 块来处理错误，以防出错。您可以使用以下内容： firebase.database().ref('user/' + loginId).once('value').then(function (snapshot) { .... }).catch(function() { console.日志('错误'); });