Firebase Storage uploadBytes根引用操作报错解决方案

这个报错和Firebase存储规则没有关系，是代码逻辑问题：Firebase Storage 禁止直接向存储桶根目录上传文件，必须指定明确的非根子路径和文件名。
你代码里触发问题的三个直接原因：

• fileName初始值是空字符串，如果用户没选文件就触发上传，ref(storage, fileName)拿到的就是根目录引用，执行uploadBytes必然报错。
• 你写的页面JSX里根本没放绑定fileChangeHandler的文件选择控件，正常流程下用户根本选不了文件，selectedFile和fileName会一直保持初始空值。
• 你之前定义的const imagesRef = ref(storage, 'images')完全没用到，就算选了文件也是直接存在根目录下，不仅容易触发根操作报错，还容易出现文件重名覆盖的问题。

1. 给上传逻辑加前置空值校验，文件没选、文件名为空的时候直接拦截，不执行后续上传操作
2. 把文件存到明确的子路径下，不要直接用空路径/根路径生成引用，建议给文件名加时间戳等唯一标识，避免重名覆盖
3. 在页面里补上文件选择的input控件，绑定fileChangeHandler事件，让用户能正常选文件
4. 修正后核心上传代码如下：

const insertHandler = async() => {
  // 空值拦截
  if (!selectedFile || !fileName) {
    present({
      buttons: [{ text: '关闭', handler: () => dismiss() }],
      message: '请先选择要上传的图片',
    })
    return
  }
  // 生成非根路径的存储引用，统一存在images目录下，加时间戳避免重名
  const storagePath = `images/${Date.now()}_${fileName}`
  const storageRef = ref(storage, storagePath);
  try {
    await uploadBytes(storageRef, selectedFile as Blob)
    console.log('文件上传成功');
    const downloadUrl = await getDownloadURL(storageRef)
    addData(downloadUrl);
  } catch (err) {
    console.error('上传失败:', err)
  }
};

在页面IonContent里补上文件选择控件，比如放在密码输入框下面：

<IonGrid className="gridinput3">
  <IonRow>
    <input type="file" accept="image/*" onChange={fileChangeHandler} />
  </IonRow>
</IonGrid>

• 你现在把用户密码明文写入Firestore是严重的安全隐患，Firebase Auth本身会管理用户凭证，绝对不要明文存储用户密码，addData方法里的password: password字段必须删掉。
• 你当前组件是登录组件，把头像上传逻辑绑在登录按钮上不符合正常业务逻辑：登录流程只需要校验账号密码，头像上传应该放在注册流程或者用户个人信息编辑流程里，现在的逻辑会导致用户每次点登录都会触发一次文件上传，逻辑完全混乱，建议拆分业务逻辑。

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