使用RapidAPI YouTube-V3 API开发克隆时遇null读取snippet错误求助

这个Uncaught TypeError: Cannot read properties of null (reading 'snippet')错误的核心诱因有三个：

• 初始状态未做防护：组件首次渲染时videoDetail的初始值是null，直接访问videoDetail.snippet.title会因为null没有snippet属性触发报错。
• useParams调用错误：代码里const { id } = useParams;缺少调用括号，正确写法是useParams()，这会导致id为undefined，API请求URL变成videos?part=snippet,statistics&id=undefined，返回的data.items为空数组，data.items[0]是undefined，最终videoDetail被设为undefined，访问snippet依然报错。
• 未处理API异常场景：如果API请求失败（比如密钥无效、网络问题）或者返回的视频数据为空，videoDetail会保持null或变为undefined，后续渲染时访问snippet仍会触发错误。

针对上述问题，按以下步骤修复：

1. 修复useParams调用 #

将获取参数的代码修改为：

const { id } = useParams(); // 补充括号，正确调用hook

2. 恢复加载状态判断并增强空值防护 #

把注释掉的加载判断恢复，同时结合可选链操作符提升鲁棒性：

// 在return前添加加载与空数据判断
if (!videoDetail) return <Typography color="#fff" p={2}>加载中...</Typography>;

// 渲染时用可选链避免直接访问可能为空的属性
<Typography color="#fff" variant="h5" fontWeight="bold" p={2}>
  {videoDetail?.snippet?.title || "无标题"}
</Typography>

3. 给API请求添加错误捕获 #

避免请求失败导致状态异常，修改useEffect内的代码：

useEffect(() => {
  if (!id) return; // id不存在时不发起请求
  fetchFromAPI(`videos?part=snippet,statistics&id=${id}`)
    .then((data) => {
      setVideoDetail(data.items[0] || null); // 确保items为空时状态仍为null
    })
    .catch((err) => {
      console.error("获取视频详情失败:", err);
      setVideoDetail(null);
    });
}, [id]);

4. 修正API参数拼写 #

检查fetchFromAPI工具函数中的参数，maxResult应为maxResults（多一个s），避免API返回异常：

const options = {
  params: {
    maxResults: "100", // 修正参数名
  },
  // ...其他headers配置
};

import { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import ReactPlayer from "react-player";
import { Box, Typography, Stack } from "@mui/material";
import { CheckCircle } from "@mui/icons-material";

import { Videos } from "./";
import { fetchFromAPI } from "../utils/FetchFromAPI";

const VideoDetail = () => {
  const [videoDetail, setVideoDetail] = useState(null);
  const { id } = useParams(); // 修复useParams调用

  useEffect(() => {
    if (!id) return;
    fetchFromAPI(`videos?part=snippet,statistics&id=${id}`)
      .then((data) => {
        setVideoDetail(data.items[0] || null);
      })
      .catch((err) => {
        console.error("获取视频详情失败:", err);
        setVideoDetail(null);
      });
  }, [id]);

  // 加载状态处理
  if (!videoDetail) {
    return <Typography color="#fff" variant="h6" p={3}>加载中...</Typography>;
  }

  return (
    <Box minHeight="95vh">
      <Stack direction={{ xs: "column", md: "row" }}>
        <Box flex={1}>
          <Box sx={{ width: "100%", position: "sticky", top: "86px" }}>
            <ReactPlayer
              url={`https://www.youtube.com/watch?v=${id}`}
              className="react-player"
              controls
            />
            <Typography color="#fff" variant="h5" fontWeight="bold" p={2}>
              {videoDetail?.snippet?.title || "无标题"}
            </Typography>
          </Box>
        </Box>
      </Stack>
    </Box>
  );
};

export default VideoDetail;

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