为什么在将数据写入 Cloud Firestore 时会收到无效参数错误？

如何解决为什么在将数据写入 Cloud Firestore 时会收到无效参数错误？

我正在尝试使用云函数将数据写入云 Firestore，但无论我做什么，我都会收到一条错误消息，指出这是一个错误的请求，并且是一个无效的参数。我已尝试更改 data.text，因为我唯一的想法是这不是正确的调用。我一直在关注 Net Ninja 的教程，但在他的教程中他只涉及一个领域。

云函数

exports.addHack = functions.https.onCall((data,context) => {
    admin.firestore().collection('Data').add({
        name: data.text,gender: data.text,age: data.text,email: data.text,address: data.text,number: data.text
    })
});

Javascript
它被封装在一个函数中，因为在用户按下提交之前，我让它检查一些东西，然后它执行这个函数，但是看起来工作正常。

function submitHack() {
    const formContainer = document.querySelector('#formContainer');
    const addHack = firebase.functions().httpsCallable('addHack');
    addHack({
        name: document.getElementById("nameField").value,gender: document.getElementById("genderField").value,age: document.getElementById("ageField").value,email: document.getElementById("emailField").value,address: document.getElementById("addressField").value,number: document.getElementById("phoneField").value
    })
    .then(() => {
        formContainer.reset();
        alert('Submission Successful! Enjoy your visit!')
    })
    .catch(error => {
        alert(error.message);
    }) 
}

HTML
这是我试图写入数据库的所有输入的表单，包括按钮

    <section>
      <h1>Registration</h1>
      <div id="formContainer">
        <div class="item">
          <label>Full Name:</label><br>
          <input type="text" id="nameField" placeholder="Enter Full Name">
        </div>
        <div class="item">
          <label>Gender:</label><br>
          <select id="genderField">
            <option value="null" selected>Please Select...</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
          </select>
        </div>
        <div class="item">
          <label>Age:</label><br>
          <input type="number" id="ageField">
        </div>
        <div class="item">
          <label>Email Address:</label><br>
          <input type="text" id="emailField" placeholder="Enter Email Address">
        </div>
        <div class="item">
          <label>Home Address:</label><br>
          <textarea type="text" id="addressField" placeholder="Enter Home Address"></textarea>
        </div>
        <div class="item">
          <label>Phone Number:</label><br>
          <input type="text" id="phoneField" placeholder="Enter Phone Number">
        </div>
        <div class="item">
          <input type="checkBox" id="checkBox">
          <label>I accept the <a id="termsLink" href="https://imgur.com/5lXi3Lc" target="_blank">Terms and Conditions</a></label>
        </div>
        <button class="call" id="submit">Submit</button>
      </div>

错误信息

{"error":{"message":"Bad Request","status":"INVALID_ARGUMENT"}}

解决方法

如下调用可调用云函数时

addHack({
        name: document.getElementById("nameField").value,gender: document.getElementById("genderField").value,...
    })

您正在传递具有多个属性的对象。

所以，在Cloud Function中，需要用到这些属性，如下：

exports.addHack = functions.https.onCall((data,context) => {
   
        const name = data.name;
        const gender = data.gender;        

        // ...
});

此外，由于它是执行异步操作的 Callable Cloud Function（Firestore add() 方法），因此您需要返回一个 Promise。 Promise 返回的数据发送回客户端。

所以以下应该可以解决问题（未经测试）：

exports.addHack = functions.https.onCall((data,context) => {
   
        const name = data.name;
        const gender = data.gender;        

        // ...

        return admin.firestore().collection('Data').add({
           name,gender,// ...
       
        })
        .then(() => {
            return {result: "success"}
        })
        .catch(error => {
            //  See https://firebase.google.com/docs/functions/callable#handle_errors
        });

});

---

当然你也可以这样做：

exports.addHack = functions.https.onCall((data,context) => {

        return admin.firestore().collection('Data').add({
           name: data.name,gender: data.gender,// ...
        })
        .then(() => {
            return {result: "success"}
        })
        .catch(error => {
            //  See https://firebase.google.com/docs/functions/callable#handle_errors
        });

});

---

最后请注意，您似乎没有从按钮调用 submitHack() 函数。我建议您首先使用一些常量测试 Cloud Function，例如通过这样做：

const addHack = firebase.functions().httpsCallable('addHack');
addHack({
    name: "test name",gender: "testGender",age: ...,// ...
})

当您确定它有效时，处理表单和 Cloud Function 调用之间的“连接”。