Next.js 13动态路由中React useState对象无法更新问题

核心原因1：React状态更新的异步特性 #

setDatas是异步操作，调用它之后不会立刻修改datas的值。你在setDatas后直接打印datas，拿到的是调用setDatas前的旧状态值。

核心原因2：Next.js 13 App Router的组件类型限制 #

如果你的动态页面是App Router下的组件，默认是服务器组件，而服务器组件不支持useState、useEffect这类客户端Hook。如果没显式声明为客户端组件，这些Hook会失效，导致datas无法被正确初始化和更新，最终打印出undefined。

解决步骤 #

1. 声明为客户端组件
   在页面文件最顶部添加'use client'指令，让组件成为客户端组件，才能正常使用React的状态Hook：

'use client';

import { useState, useEffect } from 'react';
// 其他Firestore相关导入...

const YourDynamicPage = ({ params }) => {
  const homeid = params.homeid; // 从动态路由参数获取文档ID
  const [datas, setDatas] = useState({});

  const getData = async () => {
    const docRef = doc(db, "livingPosts", homeid);
    const docSnap = await getDoc(docRef);
    // 增加文档存在判断，避免设置undefined
    if (docSnap.exists()) {
      setDatas(docSnap.data());
    }
  };

  useEffect(() => {
    getData();
  }, [homeid]); // 依赖项加入homeid，确保路由参数变化时重新拉取数据

  // 正确查看状态更新的方式：监听datas变化
  useEffect(() => {
    console.log('更新后的datas:', datas);
  }, [datas]);

  return (
    // 页面渲染内容
  );
};

export default YourDynamicPage;

2. 正确观察状态更新结果
   不要在setDatas后立即打印状态，而是通过以下方式查看：

• 在组件的JSX中直接渲染datas的内容
• 使用useEffect监听datas的变化，在回调中打印更新后的值

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