如何为预期创建的文档增加价值？ (Firebase + 反应)

Question

我想在创建它时向 firebase 用户的文档添加一个字段（用户名）。

我的逻辑：

1. 用电子邮件，通行证和用户名字段填写表格 - 有效。
2. 获取电子邮件并通过并注册 firebase (createUserWithEmailAndPassword) - WORKS。
3. 在文档创建之后（希望如此） - 触发一个 HTTP Firebase 可调用，它将更新表单中的 userName 字段 - FAILED 。

错误：未处理的错误 { 错误：5 NOT_FOUND：没有要更新的文档：projects/yeu/databases/（默认）/documents/users/DchYhQNMS12VYqzSwtEZ8UXYhcD3

我知道没有文件（还没有） - 所以我的问题是我如何确保文件在需要时准备好。

代码：

ReactJS - 注册事件，（使用表单和 OnClick）

export function SignUp() {    

  const handleSignupSubmit = (event) => {
    event.preventDefault();
    const registerForm = document.querySelector(".register");

    // firebase
    const addUserName = firebase.functions().httpsCallable("addUserName");

    // register form
    const email = registerForm.email.value;
    const password = registerForm.password.value;
    const fullName = registerForm.fullName.value;

    // firebase sign up
    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((userAuth) => {
        console.log("registered", userAuth);
        addUserName({
          userName : fullName
        }).then(((doc)=>{
          console.log("UserName Added", doc);
        }))
        .catch((error) => {
          registerForm.reset();
          registerForm.querySelector(".error").textContent = error.message;
        });
      })
      .catch((error) => {
        registerForm.querySelector(".error").textContent = error.message;
      });
  };

Firebase 后端 - 身份验证触发器

// auth trigger (new user signup)
exports.newUserSignUp = functions.auth.user().onCreate((user) => {
  // for background triggers you must return a value/promise
  return admin.firestore().collection("users").doc(user.uid).set({
    userName: 'Temp',
    email: user.email,
  });
});

Firebase 后端 - HTTP 可调用方法

// http callable function (adding a username)
exports.addUserName = functions.https.onCall((data, context) => {
  if (!context.auth) {
    throw new functions.https.HttpsError("unauthenticated");
  }    
  const userRef = admin.firestore().collection("users").doc(context.auth.uid);

  return userRef.get().then((doc) => {
    return userRef.update({
      userName: data.userName
    })
  })
});

Answer 1

在调用可调用函数之前，您的客户端应用程序应等待文档可用。 最简单的方法是为预期的文档设置一个实时侦听器，然后仅在侦听器给您一个回调指示该文档存在并且有数据后才调用该函数。

这篇博文中更详细地描述了该模式。 您应该能够非常密切地复制它正在做的事情。