React父子组件传值报错：null类型不兼容及postData可能未定义

问题描述 #

尝试从父组件ProfileBox2向子对话框组件DialogBox传递API获取的Post类型数据，点击编辑按钮时在对话框表单中展示该数据，但触发两个TypeScript错误：

父组件报错 #

Type 'null' is not assignable to type '{ id: number; name: string; email: string; } | undefined'.ts(2322)
dialogBox.tsx(13, 3): The expected type comes from property 'postData' which is declared here on type 'IntrinsicAttributes & DialogProps'

子组件报错 #

'postData' is possibly 'undefined'.ts(18048)

原代码 #

父组件ProfileBox2.tsx #

interface Post {    
    id: number;
    name: string ;
    email: string; 
  }
  
  export default function ProfileBox2 ()  {
    const [open, setOpen] = React.useState(false);
    const [posts, setPosts] = useState<Post | null>(null);
    const [error, setError] = useState<string | null>(null);

    const handleClickOpen = () => {
        setOpen(true);
      };
    
      const handleClose = () => {
        setOpen(false);
      };
   

    useEffect(() => {
      const fetchData = async () => {
        try {
          const response = await fetch('https://jsonplaceholder.typicode.com/users/1'); 
          if (!response.ok) {
            throw new Error('Failed to fetch post');
          }
          const data: Post = await response.json();
          setPosts(data);
        } catch (error) {
            if (typeof error === 'string') {
              setError(error);
            } else {
              setError('An error occurred while fetching data');
            }
          }
      };
  
      fetchData();
    }, []);
  
  
    return (
      <React.Fragment>
      <div>
        <h1>Profile</h1>
        {error && <div>Error: {error}</div>} 
        {posts && (
        <div>                 
          <p>Name: {posts.name}</p>
          <Divider/>
          <p>Email: {posts.email}</p>
        </div>
      )}
     
      <Button   onClick={handleClickOpen}>Edit</Button> 
      <DialogBox  isOpen={open} postData={posts}/> 
      </div>
      </React.Fragment>
    );    
  };

子组件DialogBox.tsx #

interface DialogProps {
      isOpen: boolean;
      onClose?: () => void;
      postData? : {    
        id: number;
        name: string;
        email: string; 
      };
    }   
    
      const DialogBox: React.FC<DialogProps> = ({postData , isOpen, onClose}) => {
        const [open, setOpen] = React.useState(false);   
     
        const handleClickOpen = () => {
            setOpen(true);
          };
        
          const handleClose = () => {
            setOpen(false);
          };
          return (
            <React.Fragment>        
            <Dialog
             open={isOpen}
              onClose={handleClose}
              PaperProps={{
                component: 'form',
                onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
                  event.preventDefault();
                  const formData = new FormData(event.currentTarget);
                  const formJson = Object.fromEntries((formData as any).entries());
                  const email = formJson.email;
                  console.log(email);
                  handleClose();
                },
              }}
            >
              <DialogTitle>Dialog </DialogTitle>
              <DialogContent>
                <DialogContentText>
                 Edit Email address
                </DialogContentText>
                {/* {PostData && PostData.email && */}
                <TextField
                  autoFocus
                  required
                  margin="dense"
                  id="name"
                  name="email"
                  label="Email Address"
                  type="email"
                  fullWidth
                  variant="standard" 
                  value = {postData.email}
                />
               {/* } */}
              </DialogContent>
              <DialogActions>
              <Button type="submit">Edit</Button>
                <Button onClick={handleClose}>Cancel</Button>
                
              </DialogActions>
            </Dialog>        
            </React.Fragment>
          );
    }
    
    export default DialogBox;

错误原因 #

1. 父组件中posts的类型是Post | null，但子组件DialogProps的postData类型是Post | undefined，TypeScript严格区分null和undefined，不允许跨类型赋值。
2. 子组件中postData是可选属性（带?），存在为undefined的可能，直接访问postData.email会触发空值检查错误。

修复方案 #

1. 统一父组件状态类型 #

将父组件中posts的状态类型改为Post | undefined，与子组件属性类型对齐：

// 替换原状态声明
const [posts, setPosts] = useState<Post | undefined>(undefined);

2. 处理子组件的空值访问 #

可选三种方式解决postData可能为undefined的问题：

• 方式一：使用可选链操作符
  直接在属性访问时添加?.，若postData为undefined则返回undefined，符合TextField的value类型要求：

value = {postData?.email}

• 方式二：条件渲染
  仅当postData存在时渲染TextField：

{postData && (
  <TextField
    autoFocus
    required
    margin="dense"
    id="name"
    name="email"
    label="Email Address"
    type="email"
    fullWidth
    variant="standard" 
    value={postData.email}
  />
)}

• 方式三：设置默认值
  解构组件属性时给postData设置默认空对象，结合空值合并运算符避免空属性：

const DialogBox: React.FC<DialogProps> = ({postData = {}, isOpen, onClose}) => {
  // ...
  value={postData.email ?? ''}
}

3. 可选优化：父组件条件传递数据 #

若希望确保仅在数据加载完成后才传递postData，可在渲染DialogBox时添加条件：

{posts && <DialogBox isOpen={open} postData={posts} />}

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