ReactJS中Firestore getDoc()获取的数据无法存入useState()钩子

你把fetchPost放在了useEffect的return语句里，这部分是React的清理函数，只有组件要卸载或者依赖项更新时才会触发，组件刚挂载的时候根本不会执行这个函数，所以setPost从来没被调用，state自然没变化。

const [post, setPost] = React.useState(null);
// 可以加个加载状态和错误状态，提升用户体验
const [isLoading, setIsLoading] = React.useState(true);
const [error, setError] = React.useState(null);

React.useEffect(() => {
    const fetchPost = async () => {
        try {
            // 先判断id是否有效，避免无效请求
            if (!id) {
                setError("文档ID无效");
                setIsLoading(false);
                return;
            }
            
            const docSnap = await getDoc(doc(db, "posts", id));
            if (docSnap.exists()) {
                setPost(docSnap.data());
            } else {
                setError("找不到指定的帖子");
            }
            setIsLoading(false);
        } catch (err) {
            setError("获取数据出错：" + err.message);
            setIsLoading(false);
        }
    };

    // 组件挂载时直接调用获取函数，别放在return里
    fetchPost();
}, [id]); // 把id加入依赖数组，id变化时自动重新请求数据

• 增加加载状态，让用户知道数据正在获取，不会误以为页面无响应
• 检查文档是否存在，避免拿到空数据却找不到原因
• 用try/catch捕获请求错误，比如网络中断、权限问题等场景
• 依赖数组必须加入id，确保id更新时能重新获取对应的数据

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