WordPress Gutenberg React区块获取Firebase Firestore数据Promise未解决问题

问题修复说明 #

1. 未使用React状态管理，你定义的state和data是普通变量，值变更不会触发组件重渲染，所以页面状态一直停留在loading，实际Promise可能已经执行完成，只是视图没有更新。
2. getDoc回调的变量引用错误：你给then回调的参数命名为data，这个参数实际是Firestore返回的文档快照对象，后续你错误调用了doc.exists和doc.data()，doc是你导入的Firestore方法，不是返回的快照实例，肯定拿不到正确结果。
3. 调用getFirestore时建议传入初始化好的firebaseApp实例，避免多实例场景下报错。
4. 不需要手动创建文本节点，直接把结果字符串存入状态即可，React会自动处理渲染逻辑。

修正后完整代码 #

import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore';
import { useState, useEffect } from '@wordpress/element';
const { render } = wp.element;

const Block = ( { element } ) => {
    // 用React状态管理数据和加载状态
    const [fetchState, setFetchState] = useState('init');
    const [data, setData] = useState('');

    useEffect(() => {
        if ( typeof window.firebaseOptions === 'undefined' ) {
            setFetchState('no_config');
            return;
        }
        // 初始化Firebase
        const firebaseApp = initializeApp( window.firebaseOptions );
        const db = getFirestore(firebaseApp);
        const docRef = doc( db, 'myDoc', window.docId );

        const getData = async () => {
            setFetchState('loading');
            try {
                const docSnap = await getDoc(docRef);
                setFetchState('promised');
                if (docSnap.exists()) {
                    setData(JSON.stringify(docSnap.data(), undefined, 2));
                } else {
                    setData(`No Doc with ID ${window.docId} found.`);
                }
            } catch (e) {
                setFetchState('error');
                setData(`加载失败：${e.message}`);
            }
        };
        getData();
    }, []);

    return (
        <div >
            <div>Doc: { window.docId }</div>
            <div>state: { fetchState }</div>
            <pre>{ data }</pre>
        </div>
    );
};

window.addEventListener( 'DOMContentLoaded', () => {
    const blocks = document.querySelectorAll( '.wp-block-my-wp-block' );
    blocks.forEach( ( block ) => {
        render(
            <Block element={ block } />,
            block
        );
    } );
} );

代码里额外加了错误捕获逻辑，方便你排查后续可能的网络、权限类问题。

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