为什么在向cloudfirestore写入数据时会出现无效参数错误

Question

我正试图使用云函数将数据写入cloud firestore，但无论我做什么，我都会收到一条错误消息，说这是一个错误的请求，也是一个无效的参数。我试过更改data.text，因为我唯一的想法是它不是正确的调用。我一直在学习网络忍者的教程，但在他的教程中，他只涉及一个领域。

云功能

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
它被封装在一个函数中，因为在用户按下submit之前，我让它检查一些东西，然后它执行这个函数，但看起来很好。

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"}}

Answer 1

如下调用可调用云函数时

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;        
// ...
});

此外，由于它是一个执行异步操作(Firestoreadd()方法(的可调用云函数，因此需要返回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()函数。我建议你先用一些常量测试云函数，例如：

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

当你确信它有效时；布线"；在窗体和Cloud Function调用之间。