NextJs+Strapi新增博客遇TypeError及404问题求助

1. 解决 TypeError: Cannot read properties of undefined type 错误 #

这个错误是因为渲染时尝试访问 blog.type.title，但新增博客的type字段为 undefined 或 null导致的。

排查与修复： #

• 先去 Strapi 后台检查新增博客的type关联字段：确认是否正确关联了对应类型条目（可能是保存时关联失败，或字段必填仅为表单层面，数据库实际允许 null）。
• 代码层面添加空值保护，避免页面崩溃：
  修改组件 return 里的type属性：

  type={blog?.type?.title?.toLowerCase() || 'default'}
  

  即使type不存在，也会用默认值替代，不会触发报错。

2. 解决新增博客30分钟后出现404的问题 #

你的getStaticPaths设置了fallback: false，意味着只有项目构建时存在的博客 slug 会被预渲染成静态页面。新增博客是构建后添加的，不在预渲染的 paths 列表中，因此访问时返回404。

修复方案： #

把fallback改成'blocking'（推荐）或者true：

export const getStaticPaths = async () => {
  const blogs = await fetchAPI('/blogs')
  const slugs = blogs.map(blog => blog.slug)
  const paths = slugs.map(slug => ( {params : { slug : slug.toString() }} ))
  return{
      paths,
      fallback: 'blocking' // 替换原来的false
  }
};

• fallback: 'blocking'：用户访问未预渲染的 slug 时，Next.js 会在服务器端动态生成该页面并缓存，后续访问直接用缓存，兼顾静态页面性能与新增内容的可访问性。
• 同时在getStaticProps中添加博客不存在的判断，主动返回404：

  export const getStaticProps = async (context) => {
    const blog = await fetchAPI(`/blogs?slug=${context.params.slug}`)
    // 新增判断：未找到博客则返回404
    if (!blog || !blog[0]) {
      return {
        notFound: true
      }
    }
    // 处理similarBlogs时，先判断solution是否存在，避免无效请求
    const similarBlogs = blog[0].solution?.title 
      ? await fetchAPI(`/solutions?title=${blog[0].solution.title}`)
      : []
  
    return {
      props: {
        blog : blog[0],
        similarBlogs : similarBlogs[0] ? similarBlogs[0].blogs.filter(data => data.id != blog[0].id).slice(0,5) : [] ,
      },
      // 可选：设置revalidate，让页面定期重新生成以获取最新数据
      revalidate: 60 // 每60秒重新验证一次
    };
  };
  

3. 其他潜在问题修复 #

• useEffect依赖数组为空，但用到了blog.slug，会导致闭包问题，更新依赖数组：

  useEffect(() => {
    fetchAPI(`/blogs?slug=${blog.slug}`)
      .then((latestBlog) => {
          updateViews("blogs", latestBlog[0]);
      });
  }, [blog.slug]); // 添加blog.slug到依赖列表
  

• 检查 Strapi 的 API 权限：确保新增博客的find权限为公开，避免 API 返回空数据。

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