Firebase Storage对象不存在错误：用户注册上传代码故障排查

• uploadTask.on() 参数顺序错误：Firebase Storage 的 uploadBytesResumable 返回任务的 on() 方法，第一个参数必须指定事件类型（如 'state_changed'）。你当前直接传入错误回调和完成回调，导致上传流程逻辑混乱，文件未完成上传就尝试获取下载链接，自然找不到存储对象。
• 拼写与方法名错误：error.massage 应为 error.message；toast.Error 应为 toast.error（方法名大小写错误）。
• 嵌套 Promise 冗余：在完成回调中使用 .then() 嵌套 async 逻辑，代码可读性差且易出现未捕获错误。

修正后的代码如下：

import { toast } from "react-toastify";

try {
  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
  const user = userCredential.user;
  // 用连字符分隔时间戳与用户名，避免拼接歧义
  const storageRef = ref(storage, `images/${Date.now()}-${username}`);
  const uploadTask = uploadBytesResumable(storageRef, file);

  uploadTask.on(
    'state_changed', // 必须指定事件类型
    (snapshot) => {
      // 可选：添加上传进度逻辑，比如显示进度条
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log(`上传进度：${progress}%`);
    },
    (error) => {
      // 处理上传错误
      toast.error(error.message); // 修正拼写错误
    },
    async () => {
      // 上传完成后执行
      const downloadURL = await getDownloadURL(uploadTask.snapshot.ref); // 改用await简化逻辑
      
      await updateProfile(user, {
        displayName: username,
        photoURL: downloadURL,
      });

      await setDoc(doc(db, "users", user.uid), {
        uid: user.uid,
        displayName: username,
        email,
        photoURL: downloadURL,
      });

      console.log("用户注册及头像上传完成");
    }
  );
} catch (error) {
  toast.error(`注册失败：${error.message}`); // 显示具体错误信息，修正方法名大小写
}

额外注意：

• 外层 try/catch 仅能捕获 createUserWithEmailAndPassword 的错误，上传过程中的错误需在 uploadTask.on 的错误回调中处理（上传任务为异步逻辑，不会被外层捕获）。

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