开发视频聊天应用时遇Uncaught TypeError错误求助

错误原因 #

报错Uncaught TypeError: Cannot read properties of null (reading 'isReceivedCall')的核心问题是：组件挂载时，call的初始值为null或undefined，此时直接访问call.isReceivedCall会触发空值读取错误。

从你提供的SocketContext代码来看，只有当收到calluser事件时才会通过setCall给call赋值，但组件首次渲染时还未触发该事件，call保持初始的空状态，导致渲染时报错。另外你在解构时额外拿了isReceivedCall，但它实际是call对象的属性，属于冗余解构，没有实际作用。

解决步骤 #

1. 给call设置合理的初始值 #

在SocketContext的state初始化时，把call的初始值设为空对象，避免它是null：

// SocketContext中的state初始化
const [call, setCall] = useState({});

2. 优化组件中的空值检查 #

在Notification组件中，使用**可选链操作符?.**来安全访问call的属性，同时去掉冗余的isReceivedCall解构：

import React, { useContext } from 'react';
import { Button } from '@mui/material';
import { SocketContext } from '../SocketContext';

const Notification = () => {
    // 去掉冗余的isReceivedCall解构
    const { answerCall, call, callAccepted } = useContext(SocketContext);

    return (
        <>
            {/* 使用可选链安全访问isReceivedCall，同时判断call是否存在 */}
            {call?.isReceivedCall && !callAccepted && (
                <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                    <h1>{call.name} is calling:</h1>
                    <Button variant="contained" color="primary" onClick={answerCall}>
                        Answer
                    </Button>
                </div>
            )}
            Notification
        </>
    )
}

export default Notification

3. （可选）兼容旧环境的空值判断 #

如果你的环境不支持可选链，可改用条件判断先确认call存在：

{call && call.isReceivedCall && !callAccepted && (
    // ... 原有渲染内容
)}

这样修改后，组件首次渲染时call为空对象，访问call?.isReceivedCall会返回undefined，不会触发错误；当收到来电事件后，call被赋值包含isReceivedCall: true的对象，此时接听按钮就会正常显示。

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