TypeScript中event.target.files可能为null错误及CSV上传解析问题解决

问题分析 #

你定义的文件状态类型是File | undefined | null，但当前空值检查仅覆盖了filename === null的场景，遗漏了undefined的情况；同时部分非空断言使用不够严谨，导致TypeScript无法确认变量非空性，从而抛出错误。

具体解决方案 #

1. 完善空值检查逻辑

在解析函数中同时校验null和undefined，确保进入解析逻辑时filename一定是File类型：

const serviceMasterParser = async () => {
  if (!filename) { // 同时匹配null和undefined
    alert('Please select a file');
  } else {
    // 此时TypeScript可确定filename为File类型，无报错
    const parsedCSVData: object[] = csvFileParser(filename);
    console.log(parsedCSVData);
  }
};

2. 简化状态类型与初始值

若无需区分null和undefined，可将状态类型简化为File | null，初始值设为null，减少空值分支：

// 修改状态定义
const [filename, setFileName] = useState<File | null>(null);

// 取消文件时设为null
<IconButton
  color="inherit"
  aria-label="delete file"
  component="label"
  onClick={() => setFileName(null)}
>
  <CancelIcon fontSize="small" />
</IconButton>

// 修改文件显示判断逻辑
<Box
  p={1}
  display={filename ? 'flex' : 'none'}
  justifyContent="space-between"
  alignItems="center"
  sx={{ background: '#f5f5f5', borderRadius: '15px' }}
  margin={2}
>
  <Typography fontSize={14}>{filename.name}</Typography> {/* 此时filename非空，无需断言 */}
  {/* ... */}
</Box>

3. 安全处理文件上传事件

避免直接使用非空断言!，先判断文件是否存在再存入状态：

<input
  type="file"
  accept=".csv"
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) setFileName(file);
  }}
  style={{ width: '100%', height: '150px', cursor: 'pointer', opacity: '0' }}
/>

4. 替换不必要的非空断言

用可选链结合默认值替代非空断言，更安全：

<Typography fontSize={14}>{filename?.name || ''}</Typography>

修改后的完整代码示例 #

import { Box, Button, IconButton, Modal, Stack, Typography } from '@mui/material';
import React, { useState } from 'react';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
import { csvFileParser } from '../../../utils/csvFileParser';

type Props = {};

const BulkServiceUpload = (props: Props) => {
  const [openModal, setOpenModal] = useState(false);
  const [filename, setFileName] = useState<File | null>(null);
  console.log(filename);

  const style = {
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 600,
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    borderRadius: '1rem',
    borderWidth: 0,
    p: 4
  };

  const serviceMasterParser = async () => {
    if (!filename) {
      alert('Please select a file');
    } else {
      const parsedCSVData: object[] = csvFileParser(filename);
      console.log(parsedCSVData);
    }
  };

  return (
    <>
      <Box>
        <Button
          variant="contained"
          color="success"
          onClick={() => setOpenModal(true)}
        >
          <UploadIcon />
          Add Service
        </Button>
      </Box>

      <Modal open={openModal} onClose={() => setOpenModal(false)}>
        <Stack padding={3} sx={style} spacing={3}>
          <Typography marginY={3} variant="h5" fontWeight={600}>
            Upload Service in Bulk
          </Typography>
          <Box
            sx={{
              border: 'dashed 1px black',
              borderRadius: '1rem',
              position: 'relative',
              background: '#f0f0f0',
              '&:hover': { backgroundColor: '#EFFAF5' }
            }}
          >
            <Box position="absolute" width="100%" height="100%" p={3}>
              <Box display="flex" justifyContent="center" alignItems="center">
                <UploadIcon />
                <Typography>Bulk Upload Service Master</Typography>
              </Box>
              <Typography fontSize="10px" textAlign="center">
                only .csv file is supported
              </Typography>
            </Box>

            <input
              type="file"
              accept=".csv"
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                const file = e.target.files?.[0];
                if (file) setFileName(file);
              }}
              style={{ width: '100%', height: '150px', cursor: 'pointer', opacity: '0' }}
            />

            <Box
              p={1}
              display={filename ? 'flex' : 'none'}
              justifyContent="space-between"
              alignItems="center"
              sx={{ background: '#f5f5f5', borderRadius: '15px' }}
              margin={2}
            >
              <Typography fontSize={14}>{filename?.name || ''}</Typography>
              <IconButton
                color="inherit"
                aria-label="delete file"
                component="label"
                onClick={() => setFileName(null)}
              >
                <CancelIcon fontSize="small" />
              </IconButton>
            </Box>
          </Box>
          <Button
            variant="contained"
            color="success"
            onClick={serviceMasterParser}
          >
            <UploadIcon />
            Bulk Upload
          </Button>
          <Button color="success" fullWidth variant="contained">
            Add Single Service
          </Button>
        </Stack>
      </Modal>
    </>
  );
};

export default BulkServiceUpload;

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