TypeScript中'req.file'可能为undefined的5处报错求助

问题背景 #

使用Express+Multer+Firebase Storage实现文件上传功能时，TypeScript代码出现5处相同报错：'req.file' is possibly 'undefined'，涉及以下代码位置：

• const storageRef = ref(storage, files/${req.file.originalname + " " + dateTime});
• const metadata = {contentType: req.file.mimetype};
• const snapshot = await uploadBytesResumable(storageRef, req.file.buffer, metadata);
• name: req.file.originalname,
• type: req.file.mimetype,

已安装@types/express、dotenv、@types/multer、typescript等依赖，但报错未解决。

原代码 #

import express, { Router } from "express";
import { initializeApp } from "firebase/app";
import { getStorage, ref, getDownloadURL, uploadBytesResumable } from "firebase/storage";
import multer from "multer";
import config from "/home/rizki/herbal66-laravel/express/firebase.config"

const router: Router = express.Router();

//Initialize a firebase application
initializeApp(config.firebaseConfig);

// Initialize Cloud Storage and get a reference to the service
const storage = getStorage();

// Setting up multer as a middleware to grab photo uploads
const upload = multer({ storage: multer.memoryStorage() });

router.post("/", upload.single("filename"), async (req, res) => {
    try {
        const dateTime = giveCurrentDateTime();

        const storageRef = ref(storage, `files/${req.file.originalname + "       " + dateTime}`);

        // Create file metadata including the content type
        const metadata = {
            contentType: req.file.mimetype,
        };

        // Upload the file in the bucket storage
        const snapshot = await uploadBytesResumable(storageRef, req.file.buffer, metadata);
        //by using uploadBytesResumable we can control the progress of uploading like pause, resume, cancel

        // Grab the public url
        const downloadURL = await getDownloadURL(snapshot.ref);

        console.log('File successfully uploaded.');
        return res.send({
            message: 'file uploaded to firebase storage',
            name: req.file.originalname,
            type: req.file.mimetype,
            downloadURL: downloadURL
        })
    } catch (error) {
        return res.status(400).send(error.message)
    }
});

const giveCurrentDateTime = () => {
    const today = new Date();
    const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
    const time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    const dateTime = date + ' ' + time;
    return dateTime;
}

export default router;

解决方案 #

方法一：添加运行时检查（推荐） #

在处理逻辑前先判断req.file是否存在，若不存在直接返回错误，TypeScript会自动推断后续代码中req.file的有效性：

router.post("/", upload.single("filename"), async (req, res) => {
    try {
        // 新增检查逻辑
        if (!req.file) {
            return res.status(400).send("请上传文件");
        }
        
        const dateTime = giveCurrentDateTime();
        const storageRef = ref(storage, `files/${req.file.originalname + "       " + dateTime}`);
        // 后续原代码保持不变
    } catch (error) {
        return res.status(400).send(error.message)
    }
});

方法二：使用非空断言操作符 #

在每个req.file后添加!，告诉TypeScript该值一定不为undefined，但需注意：若实际请求未上传文件，运行时会抛出错误，建议结合方法一的检查使用：

const storageRef = ref(storage, `files/${req.file!.originalname + "       " + dateTime}`);
const metadata = {
    contentType: req.file!.mimetype,
};
const snapshot = await uploadBytesResumable(storageRef, req.file!.buffer, metadata);
// ...
return res.send({
    message: 'file uploaded to firebase storage',
    name: req.file!.originalname,
    type: req.file!.mimetype,
    downloadURL: downloadURL
})

方法三：扩展Express Request类型 #

创建类型声明文件（如types/express.d.ts），扩展Express的Request接口，明确file属性类型：

declare namespace Express {
  interface Request {
    file: Express.Multer.File;
  }
}

修改tsconfig.json，确保包含该类型文件：

{
  "include": ["src/**/*", "types/**/*"]
}

报错原因 #

TypeScript默认的Express Request类型未包含file属性，尽管multer中间件会处理文件上传，但类型系统无法自动推断upload.single("filename")执行后req.file一定存在，因此需要通过上述方式手动处理类型或添加运行时检查。

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