Firebase Storage头像上传失败及React渲染错误技术求助

核心错误原因 #

你看到的错误提示翻译为：

对象不能作为React子元素（发现：[object Error]）。如果您想渲染子元素集合，请改用数组。

这个错误是因为你在catch块里直接把Error对象传给了setError，React没法直接渲染Error对象，只能渲染字符串内容。

具体修复步骤 #

1. 修正错误状态的设置 #

把catch里的setError(err)改成提取错误的文本信息：

catch(err){
    // 取错误的字符串信息，别直接传Error对象
    setError(err.message || err.toString())
    setTimeout(()=>{
        setError('')
    },2000)
    return;
}

2. 补上上传任务的错误处理函数 #

你现在的uploadTask.on调用里缺了fn2（错误处理函数），上传时出了错没法被捕获，得补上：

// 新增错误处理函数
function fn2(error) {
    setError(error.message || '上传头像失败')
    setLoading(false)
    setTimeout(()=>{
        setError('')
    },2000)
}

// 调用时带上fn2
uploadTask.on('state_changed', fn1, fn2, fn3)

3. 调整加载状态的结束时机 #

现在setLoading(false)放在fn3外面，会导致头像还没传完、URL还没拿到就结束加载，得移到getDownloadURL的回调里：

function fn3(){
    uploadTask.snapshot.ref.getDownloadURL().then((url)=>{
        console.log(url)
        databse.users.doc(uid).set({
            email: email,
            userId:uid,
            fullname:name,
            profileUrl:url,
            // createdAt: databse.getTimeStamp()
        })
        // 上传+数据写入完成后再结束加载
        setLoading(false);
        console.log("done")
    })
    // 删掉这里的setLoading(false)
}

4. 可选：适配Firebase新版本 #

如果用的是Firebase v9+模块化版本，storage.ref是旧版语法，得改成模块化调用：

// 先导入对应的方法
import { ref, uploadBytesResumable } from "firebase/storage";

// 替换原创建uploadTask的代码
const storageRef = ref(storage, `/users/${uid}/ProfileImage`);
const uploadTask = uploadBytesResumable(storageRef, file);

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