Firebase 9实现图片上传时报storage.ref不是函数该如何修复

你使用了Firebase 8及更早版本的命名空间式API写法，Firebase 9默认采用模块化API，ref、put、getDownloadURL等存储相关方法都需要单独导入，不能直接通过storage实例调用，所以触发了该类型错误。同时你代码里的时间戳写法、方法名大小写也存在兼容问题。

• 第一步：导入Firebase 9模块化API所需的方法

import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";
import { getFirestore, collection, addDoc, serverTimestamp } from "firebase/firestore";

// 初始化实例（假设你已经完成Firebase app初始化）
const storage = getStorage();
const db = getFirestore();

• 第二步：替换图片上传逻辑
  你原来的第一段代码需要修改为：

const imageRef = ref(storage, `images/${image.name}`);
const uploadTask = uploadBytes(imageRef, image);

如果需要监听上传进度，可以用uploadBytesResumable代替uploadBytes。

• 第三步：替换获取下载链接+存库逻辑
  你原来的第二段代码需要修改为：

uploadTask.then(() => {
  getDownloadURL(imageRef)
    .then(url => { 
        // 写入数据到Firestore
        addDoc(collection(db, "posts"), { 
            timestamp: serverTimestamp(),
            caption: caption, 
            imageUrl: url, 
            username: username
        });

        // 重置状态
        setProgress(0);
        setCaption("");
        setImage(null);
    })
})

• Firebase 9里不存在Firebase.ServerValue.TIMESTAMP写法，统一用导入的serverTimestamp()方法获取服务器时间
• 获取下载链接的方法名是驼峰写法getDownloadURL，注意URL三个字母全大写，小写会触发方法不存在错误

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