Vue 3创建Firebase Auth账号后无法上传图片至Firebase Storage

核心错误原因 #

错误提示Cannot read properties of null (reading 'files')表明photo.value是null，即你通过ref(null)声明的文件输入框引用没有正确关联到DOM元素，导致无法访问文件选择器的files属性。

具体修复方案 #

1. 确保文件输入框正确绑定ref #

在模板中的文件上传输入标签上，必须添加ref="photo"属性，让Vue能够获取到该DOM元素的引用：

<input type="file" ref="photo" accept="image/*" />

如果缺少这一步，photo.value会始终为null，无法读取用户选择的文件。

2. 增加文件选择校验 #

在执行上传操作前，先检查用户是否选择了文件，避免空上传引发错误：

// 在上传前添加校验
if (!photo.value || photo.value.files.length === 0) {
    alert("请选择要上传的头像图片");
    return;
}

3. 修正异步操作执行顺序 #

你当前的代码中，上传文件、写入Firestore与关闭弹窗、页面跳转是并行执行的，这可能导致异步操作未完成就触发后续逻辑。改用async/await整理异步流程，确保所有操作完成后再执行收尾：

const signUp = async () => {
    const result = await v$.value.$validate()
    if(result){
        try {
            const data = await createUserWithEmailAndPassword(auth, formData.email, formData.password);
            
            // 文件校验
            if (!photo.value || photo.value.files.length === 0) {
                alert("请选择要上传的头像图片");
                return;
            }
            
            // 上传头像
            const imagesRef = stRef(storage, 'images/'+data.user.uid);
            await uploadBytes(imagesRef, photo.value.files[0]);
            
            // 写入用户数据到Firestore
            await setDoc(doc(db, "users", data.user.uid), {
                fn : formData.fn,
                ln : formData.ln,
                uid: data.user.uid,
                email: formData.email,
            });
            
            // 所有操作完成后执行收尾
            closeModal();
            router.go();
            alert("Success, form submitted.");
        } catch (error) {
            // 统一处理所有错误
            switch (error.code) {
                case 'auth/invalid-email':
                    errMsg.value = 'Invalid email address or password';
                    break;
                case 'auth/user-not-found':
                    errMsg.value = 'User not found';
                    break;
                case 'auth/wrong-password':
                    errMsg.value = 'Invalid email address or password';
                    break;
                case 'auth/internal-error':
                    errMsg.value = 'Invalid email address or password';
                    break;
                case 'auth/missing-email':
                    errMsg.value = 'Fill email address or password field';
                    break;
                case 'auth/email-already-in-use': 
                    errMsg.value = 'Email already used';
                    break;
                default:
                    errMsg.value = error.message;
                    break;
            }
        }
    } else {
        alert(errMsg.value, "Form failed to submitted")
    }
}

改用try/catch替代Promise链式调用，代码可读性更强，同时能捕获所有异步操作的错误。

4. 补充错误覆盖范围 #

原代码仅捕获了创建用户的错误，修改后try/catch可以覆盖上传文件、写入Firestore过程中出现的所有错误，确保错误能被正确提示。

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