Next.js动态路由结合SSR出现TypeError问题求助

问题原因 #

1. 路由路径不匹配
   你的动态路由文件是pages/[id].js，按照Next.js的路由规则，该文件对应的访问路径是根目录下的动态参数，比如http://localhost:3000/1。而你访问的/posts/1对应的应该是pages/posts/[id].js的文件结构，当前文件无法匹配这个路径，导致getInitialProps没有正确执行，post参数未被传入组件。

2. 缺乏请求错误处理
   即使路径正确，如果请求接口失败（比如网络异常、返回404），res.json()可能返回空对象或错误内容，导致post为undefined，渲染时访问post.title就会触发TypeError。

解决方法 #

方法一：调整路由文件结构 #

如果要支持/posts/1的访问路径，需要创建pages/posts目录，把[id].js移动到该目录下，结构变为pages/posts/[id].js。

方法二：修改访问路径 #

直接访问http://localhost:3000/1，匹配当前pages/[id].js的路由规则。

方法三：添加错误处理逻辑 #

在组件和getInitialProps中增加容错处理，避免因post未定义导致报错：

import React from 'react';

const Post = ({ post }) => {
  // 先判断post是否存在
  if (!post) {
    return <div>加载中或文章不存在</div>;
  }
  
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

Post.getInitialProps = async ({ query }) => {
  try {
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${query.id}`);
    // 检查请求是否成功
    if (!res.ok) {
      return { post: null };
    }
    const post = await res.json();
    return { post };
  } catch (error) {
    // 捕获网络请求错误
    console.error('请求文章失败:', error);
    return { post: null };
  }
};

export default Post;

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