问题描述
我正在尝试使用云函数将数据写入云 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);
})
}
<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 调用之间的“连接”。