React报错：Cannot read properties of null (reading 'map') 技术求助

这个错误的核心原因是你尝试在null或undefined值上调用map方法。你的Videos组件依赖传入的videos props进行渲染，当这个props未传入、值为null，或是还在异步加载未返回结果时，执行videos.map就会触发该报错。

解决方案 #

1. 恢复并完善空值判断逻辑

把你注释掉的判断逻辑恢复，同时覆盖videos为null、undefined或空数组的场景：

import React from "react";
import { Stack, Box } from "@mui/material";

import { ChannelCard, Loader, VideoCard } from "./";

const Videos = ({ videos, direction }) => {
  // 当videos不存在或无数据时，显示加载组件
  if (!videos || videos.length === 0) return <Loader />;
  
  return (
    <Stack direction={direction || "row"} flexWrap="wrap" justifyContent="start" alignItems="start" gap={2}>
      {videos.map((item, idx) => (
        <Box key={idx}>
          {item.id.videoId && <VideoCard video={item} /> }
          {item.id.channelId && <ChannelCard channelDetail={item} />}
        </Box>
      ))}
    </Stack>
  );
}

export default Videos;

2. 给props设置默认值

通过给videos设置默认空数组，避免未传入该props时出现问题：

const Videos = ({ videos = [], direction }) => {
  if (videos.length === 0) return <Loader />;
  
  // 其余代码保持不变
}

3. 可选链操作符兜底

如果不需要在空数组时显示加载组件，也可以用可选链直接在map调用前做判断：

{videos?.map((item, idx) => (
  // 映射内容不变
))}

额外注意事项 #

• 尽量不要用数组索引idx作为元素的key，如果数据有唯一标识（比如item.id.videoId或item.id.channelId），使用这些唯一值作为key能提升渲染稳定性。
• 如果videos是异步请求获取的，确保父组件在请求完成前不要传递null/undefined给Videos组件，或者在组件内部统一处理加载状态。

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