React组件传递user至Fire.jsx时出现未定义错误

1. 正确修正Fire组件代码 #

原代码存在三个核心问题：未读取组件Props、顶层使用await、文档ID格式错误，以下是修正后的完整示例：

import { useEffect } from 'react';
import { setDoc, doc, db } from './firebase'; // 确保db已完成初始化

export default function Fire({ user }) { // 从组件props中解构获取user
  useEffect(() => {
    // 避免user为空时执行无效操作
    if (!user) return;

    const saveUserData = async () => {
      try {
        // 直接将user作为文档ID传入，而非包裹成对象
        await setDoc(doc(db, "users", user), {
          email: user
        });
        console.log("用户数据存储成功");
      } catch (error) {
        console.error("存储失败：", error);
      }
    };

    saveUserData();
  }, [user]); // 依赖user状态，当user更新时重新触发逻辑

  return <div>用户数据处理中...</div>;
}

2. 错误点拆解 #

• 未读取组件Props：原代码没有从组件的props中获取user变量，直接使用user导致「user not defined」报错，必须通过组件参数解构或props.user访问传入的属性。
• await不能直接放在组件顶层：React组件顶层不允许使用await，异步逻辑必须封装在async函数内，再通过useEffect钩子调用。
• 文档ID格式错误：doc(db, "users", { user })会把对象当作文档ID，不符合Firebase要求，需直接传入user（邮箱字符串）作为文档ID。

3. 额外注意事项 #

• 确保传入的user是有效邮箱字符串，避免空值或undefined引发存储失败。
• 保留错误捕获逻辑，便于调试存储过程中出现的权限、网络等问题。

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