Web端Firebase SDK 9上传图片报child() is not a function如何解决

数据老陈

2026-10-4

报错原因

Firebase 9 全面改用函数式模块化API，废弃了旧版本（v8及更低）中的链式child()方法，不管是Storage实例还是通过ref()创建的引用对象，都不再支持.child()调用，这是你触发报错的根本原因。

正确实现方案

你可以直接在ref()函数的第二个参数传入完整的存储路径，不需要链式调用。注意存储路径必须指定到具体文件名，不能只写目录路径，否则会上传失败。

基础写法（直接指定完整路径）

if( image ){
  // 第二个参数传入完整存储路径，这里示例用上传文件的原始文件名，你可根据需求自定义命名规则
  const uploadRef = ref(storage, `/images/${image.name}`);
  uploadBytes(uploadRef, image).then(function(snapshot) {
    console.log(snapshot);
    console.log('Uploaded a blob or file!');
    // 若需要获取上传后文件的访问地址，可引入getDownloadURL方法获取
    // const imgUrl = await getDownloadURL(snapshot.ref)
  });
}

层级创建引用写法（替代原child方法的层级写法）

如果你需要分层创建父目录、子文件的引用，可把父级引用作为ref()的第一个参数传入，第二个参数传子路径即可：

if( image ){
  // 先创建根引用
  const rootRef = ref(storage);
  // 再创建images目录引用
  const imagesDirRef = ref(rootRef, 'images');
  // 最后创建具体文件的引用
  const uploadRef = ref(imagesDirRef, image.name);
  uploadBytes(uploadRef, image).then(function(snapshot) {
    console.log(snapshot);
    console.log('Uploaded a blob or file!');
  });
}