Reactjs 在NextJS中通过Window.postMessage获取跨窗口消息错误

结帐卡支付提供商完成3D安全授权后，我需要与重定向页面进行通信。因为我不想改变父窗口的位置，所以我有这样的设置

/payment.tsx

这是打开3DS Auth URL新窗口的页面

export default function IndexPage() {
    useEffect(() => {
        //redirect will be replaced by 3d secure url
        // which after 3ds completes will redirect to /redirect
        const redirectWindow = window.open('/redirect')

        //I assume message posted by /redirect will be recieved here
        window.addEventListener('message', (event) => {
            //  if (typeof event.data === 'object' && 'key' in event.data) {
            if (typeof event.data === 'object' && 'key' in event.data && event.data.key === 'redirect') {
                console.log(event.data, 'Received From Redirect Window')
                redirectWindow?.close()
            }
        })
    }, [])

    return <div>Waiting for Redirect to send message</div>
}

导出默认函数IndexPage（）{
useffect（（）=>{
//重定向将被3d安全url替换
//在3ds完成后将重定向到/重定向
const redirectWindow=window.open（“/redirect”）
//我假设这里会收到由/重定向发布的消息
window.addEventListener（'消息'，（事件）=>{
//if（event.data中的typeof event.data==='object'&&&key'））{
if（event.data和event.data.key中的typeof event.data==='object'&&&key'，redirect'）{
console.log（event.data，“从重定向窗口接收”）
重定向窗口？.close（）
}
})
}, [])
返回等待重定向以发送消息
}

下一页/redirect是3DS在成功或失败后返回的页面

import { useEffect } from 'react'

export default () => {
    useEffect(() => {
        window.addEventListener('message', (event) => {
            console.log(event)
            event.source?.postMessage({ key: 'redirect', message: 'Hi' }, '*')
            //}
        })
    }, [])
    return <div>Transaction Successfull I should be closed by my Parent Window</div>
}

从“react”导入{useffect}
导出默认值（）=>{
useffect（（）=>{
window.addEventListener（'消息'，（事件）=>{
console.log（事件）
event.source？.postMessage（{key:'redirect'，message:'Hi'}，'*'））
//}
})
}, [])
退货交易成功我应该被我的父窗口关闭
}

其目的是在结帐3DS完成并返回应用程序后，通过向/payment发送消息来关闭/redirect窗口。此设置可能不是可行的方法，因此欢迎反馈。但目前我无法收到任何来自/重定向的消息，因此无法关闭窗口

示例代码可以在中找到