如何通过useEffect在页面加载时为Firestore用户创建文档？

错误根源 #

新用户首次登录时，Firebase中还未生成对应的用户文档，调用getDoc(docRef)后返回的docSnap.data()是undefined，直接访问data.data().ingredients就会触发Cannot read properties of undefined类型错误。

修正方案 #

1. 先通过docSnap.exists()判断文档是否存在，而非直接读取字段
2. 文档不存在时，直接创建带初始ingredients数组的文档（无需用arrayUnion，因为文档尚未存在，直接设置数组即可）
3. 创建文档后同步更新本地状态imgArr，保证页面数据一致

修正后的代码 #

useEffect(() => {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      const uid = user.uid; // 直接用回调传入的user对象，比auth.currentUser更可靠
      const docRef = doc(db, "users", uid);

      const getUsers = async () => {
        const docSnap = await getDoc(docRef);
        if (docSnap.exists()) {
          // 文档存在时读取数据，兜底处理避免ingredients字段意外缺失
          const userData = docSnap.data();
          setImgArr(userData.ingredients || []);
        } else {
          // 文档不存在时创建初始文档，可自定义初始数组内容
          const initialIngredients = [];
          await setDoc(docRef, { ingredients: initialIngredients });
          setImgArr(initialIngredients);
        }
      };
      getUsers();
    } else {
      // 登出时清空本地数组
      setImgArr([]);
    }
  });
}, [auth]);

const clickHandler = async (e) => {
  try {
    setForm(e.target.value);
    const newImg = await getResponse();
    const uid = auth.currentUser.uid;
    const docRef = doc(db, "users", uid);
    
    // 加merge选项，极端情况文档被删除时也能正常创建并更新
    await setDoc(docRef, {
      ingredients: arrayUnion({ name: form, image: newImg.image }),
    }, { merge: true });
    
    // 用函数式更新状态，避免闭包导致的旧状态问题
    setImgArr(prev => [...prev, { name: form, image: newImg.image }]);
  } catch (err) {
    console.error(err);
  }
};

额外优化点 #

• 优先使用onAuthStateChanged回调中的user对象获取uid，避免auth.currentUser可能出现的异步延迟问题
• 更新本地状态时用函数式写法，确保基于最新状态更新
• 点击更新文档时添加{ merge: true }，增强代码鲁棒性

内容的提问来源于stack exchange，提问作者chickenwings123