同时上传图片到Firebase Storage和文本到Firestore时报错如何解决

e.target在提交事件中指向的是整个<form>元素，而files属性是<input type="file">控件的专属属性，从表单元素上直接读取files只会得到undefined，因此访问undefined[0]就触发了本次报错。

推荐通过给文件输入框绑定ref的方式获取文件，和你当前获取文本输入值的逻辑保持一致：

1. 先声明文件输入框的ref：

import { useRef } from 'react';
// 组件内
const postTextRef = useRef();
const postFileRef = useRef(); // 新增文件输入框ref

2. 修改表单的文件输入框，绑定ref：

<form onSubmit={postSubmitHandler}>
    <input type="text" ref={postTextRef}/>
    <input type="file" ref={postFileRef}/> {/* 绑定ref */}
    <button type="submit">上传</button>
</form>

3. 修改提交函数中获取文件的逻辑，同时修正其他潜在问题：

function postSubmitHandler(e) {
    e.preventDefault();
    // 从文件输入框的ref读取files
    const file = postFileRef.current.files[0];

    console.log(file)

    if (!file) return;
    const storageRef = ref(storage, `posts/${file.name}`); // 修正拼写错误sotrageRef→storageRef
    const uploadTask = uploadBytesResumable(storageRef, file);

    uploadTask.on(
        "state_changed",
        (snapshot) => {
        const prog = Math.round(
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(prog);
        },
        (error) => console.log(error),
        () => {
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            console.log("File available at", downloadURL);
            // 优化：改用add方法自动生成文档ID，避免同一用户多次上传覆盖旧数据
            firestore.collection('posts').add({
                imageURL: downloadURL,
                caption: postTextRef.current.value,
                postedAt: new Date(),
                likes: 0,
                uid: currentUser.uid // 新增字段保存发布者ID，方便后续权限校验、查询用户发布内容
            }).then(() => {
                // 可选：提交成功后清空表单
                postTextRef.current.value = '';
                postFileRef.current.value = '';
                setProgress(0);
            })
        });
       }
    ); 
  }

• 增加文件校验：上传前判断文件类型、大小，避免上传不符合要求的资源
• 增加提交状态控制：上传过程中禁用提交按钮，防止用户重复点击触发多次上传
• 完善错误处理：上传失败、Firestore写入失败时给用户明确的提示
• 文件名处理：如果允许同名文件上传，建议给文件名加随机后缀或者时间戳，避免覆盖Storage中的旧文件

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